帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:NAT  react  Native  React Native  
Google Signin for your react native applications

  • 源代码名称:react-native-google-signin
  • 源代码网址:http://www.github.com/devfd/react-native-google-signin
  • react-native-google-signin源代码文档
  • react-native-google-signin源代码下载
  • Git URL:
    git://www.github.com/devfd/react-native-google-signin.git
  • Git Clone代码到本地:
    git clone http://www.github.com/devfd/react-native-google-signin
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/devfd/react-native-google-signin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • react-native-google-signin

    xcode config

    特性

    • 支持所有 3种认证方法( ( 使用服务器端验证或者脱机访问( 即服务器端访问) 进行标准) )
    • 本机登录按钮
    • Android和iOS之间的一致 API
    • 基于promise的JS API

    安装

    npm install react-native-google-signin --save
    react-native link react-native-google-signin

    注释

    如果你使用 React <v0.40 stick v0.8.1 ( npm install react-native-google-signin@0.8 --save ) 。

    如果你使用 React <v0.47 stick v0.10.0 ( npm install react-native-google-signin@0.10 --save ) 。

    项目设置和初始化

    请参见 Android指南iOS指南。

    public API

    1.GoogleSigninButton

    signin button

    import {GoogleSignin, GoogleSigninButton} from'react-native-google-signin';render() {
     <GoogleSigninButton
     style={{width:48, height:48}}
     size={GoogleSigninButton.Size.Icon}
     color={GoogleSigninButton.Color.Dark}
     onPress={this._signIn.bind(this)}/>}

    size 可能的值为:

    • Size.Icon: 仅显示 Google icon 。 推荐的大小 48 x 48
    • Size.Standard: 带'登录'的icon 。 推荐的大小 230 x 48
    • Size.Wide: 带'使用google登录'的icon 。 推荐的大小 312 x 48

    color 可能的值为:

    • Color.Dark: 应用蓝色背景
    • Color.Light: 应用浅灰色背景

    2.GoogleSignin

    import {GoogleSignin, GoogleSigninButton} from'react-native-google-signin';
    - hasPlayServices

    检查设备是否安装了 Google Play Services 。 return true 上总是。

    GoogleSignin.hasPlayServices({ autoResolve:true }).then(() => {
     // play services are available. can now configure library})
    .catch((err) => {
     console.log("Play services error", err.code, err.message);
    })

    autoResolve 库提示用户采取行动来解决这个问题时。

    例如如果未安装播放服务,则它将提示: prompt install

    --配置

    在登录前必须调用这里方法。

    默认配置的示例你可以获取用户电子邮件和基本配置文件信息。

    import {GoogleSignin, GoogleSigninButton} from'react-native-google-signin';GoogleSignin.configure({
     iosClientId:<FROMDEVELOPERCONSOLE>, // only for iOS})
    .then(() => {
     // you can now call currentUserAsync()});

    从移动应用程序和后端服务器访问Google驱动程序的示例

    GoogleSignin.configure({
     scopes: ["https://www.googleapis.com/auth/drive.readonly"], // what API you want to access on behalf of the user, default is email and profile iosClientId:<FROMDEVELOPERCONSOLE>, // only for iOS webClientId:<FROMDEVELOPERCONSOLE>, // client ID of type WEB for your server (needed to verify user ID and offline access) offlineAccess:true// if you want to access Google API on behalf of the user FROM YOUR SERVER hostedDomain:''// specifies a hosted domain restriction forceConsentPrompt:true// [Android] if you want to show the authorization prompt at each login accountName:''// [Android] specifies an account name on the device that should be used})
    .then(() => {
     // you can now call currentUserAsync()});

    你的应用 ClientID ( iosClientId ) 总是需要你的app

    - currentUserAsync

    通常在主组件的componentDidMount 上调用。 如果已经登录,这里方法将给你当前用户,如果还没有登录则为空。

    GoogleSignin.currentUserAsync().then((user) => {
     console.log('USER', user);
     this.setState({user: user});
     }).done();
    - currentUser -

    访问用户一次登录的简单 getter 。

    constuser=GoogleSignin.currentUser();// user is null if not signed in
    --登录

    提示模式允许用户登录到你的应用程序

    GoogleSignin.signIn()
    .then((user) => {
     console.log(user);
     this.setState({user: user});
    })
    .catch((err) => {
     console.log('WRONG SIGNIN', err);
    })
    .done();
    - getAccessToken ( 仅适用于 Android )

    获取用户访问令牌。

    GoogleSignin.getAccessToken()
    .then((token) => {
     console.log(token);
    })
    .catch((err) => {
     console.log(err);
    })
    .done();

    注意:如果用户取消登录进程,则会返回带有代码的

    - signOut

    从设备中删除用户会话

    GoogleSignin.signOut()
    .then(() => {
     console.log('out');
    })
    .catch((err) => {
    });

    :方法没有返回任何事件。 成功回调将始终被调用。

    - revokeAccess

    从授权的应用程序中删除你的应用程序

    GoogleSignin.revokeAccess()
    .then(() => {
     console.log('deleted');
    })
    .catch((err) => {
    })

    3 。用户

    这是用户登录后获得的典型信息:

     {
     id: <user id. do not use on the backend>
     name: <user name>
     givenName: <user given name> (Android only)
     familyName: <user family name> (Android only)
     email: <user email>
     photo: <user picture profile>
     idToken: <token to authenticate the user on the backend>
     serverAuthCode: <one-time token to access Google API from the backend on behalf of the user>
     scopes: <list of authorized scopes>
     accessToken: <needed to access google API from the application>
     }

    为获得用户accessToken呼叫服务提供

    注意:仅当指定有效的webClientId 时, idToken Note才为空。webClientId 与开发人员控制台上的服务器连接相对应。 价格必须为磅的WEB

    阅读 iOS文档Android文档了解更多信息

    注意:只有指定有效的webClientId 并将 offlineAccess 设置为 true 时,serverAuthCode注释才为空。 获得认证代码后,可以将它的发送到后端服务器并交换访问令牌的代码。 只有这个新获得的令牌才能访问用户数据。

    阅读 iOS文档Android文档了解更多信息

    附加作用域

    默认的请求范围是 emailprofile

    如果你想管理应用程序( 例如访问用户议程或者上载文件到驱动器) 中的其他数据,你需要请求额外的权限。 这可以通过在配置GoogleSignin实例时添加必要的作用域来完成。

    请访问 https://developers.google.com/oauthplayground/ 获取可用作用域的列表。

    许可证

    ( MIT )



    文章标签:react  NAT  Native  React Native  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语