由于网络上很难找到React接入谷歌登录只能自己写点东西

摆尾
1,909 阅读2分钟

因为业务需求需要商城接入微信、谷歌登录，百度半天又找不到可以直接复制粘贴的代码，而且多是使用原生js和vue，react的资料极少见，只能自己慢慢踩坑，写了一些很差的代码（至少功能完成了）

  1. 接入谷歌登录，首先第一点就是要找到科学的上网方式……这一步很废话也很重要。
    前期的准备工作很多，注册谷歌账号之类的，这些基础零件都准备好之后要开始跟谷歌要一个门。

    因为是要调用谷歌登录的API，所以需要得到谷歌的授权才能继续
    由于对谷歌开发一无所知，所以在找控制台的时候花费了很多时间

  2. 登录谷歌账户后，直接点击console.cloud.google.com登录到Google cloud platform（谷歌云平台）。
    初次登录后应该会指引创建專案，有了專案后选择一旁的API和服务，进入凭证页。 之后按照指示一步一步创建OAuth同意画面和凭证即可。

    中间会有一个设定域的，个人理解是需要在用户同意画面出现的读取资料权限，但还是不太懂

  3. 之后就是前端代码部分，在谷歌提供的文档里似乎是有几种加载谷歌登录的方式，但没空研究太多，只选用了其中一种来实践。

    这里提供一些谷歌官方文档，可以凭借个人能力选择哪种更好: developers.google.com/identity/si… (用于客户端 Web 应用程序的 OAuth 2.0)
    developers.google.com/identity/si… （将Google登录功能集成到您的网络应用中）
    developers.google.com/identity/gs… (使用他们的Google帐户注册和登录用户到您的网站)
    这三种方式和导入的script都各有不同，具体什么区别还待研究

  4. 根据文档所说，在登录页那里需要引入一个js文件。

    <script src="https://accounts.google.com/gsi/client" async defer></script>

    如果直接放在index.html下也行，但如果只想在登录页面才加载，就需要做点小动作。

    constructor(props) {
    super(props);

    this.loadGoogleJS();
    // 将回调函数放在windoe里，让谷歌获取到，否则无效
    // 注意！需要指向当前组件this，这样可以使用组件下的其他方法
    // 如果使用其他方式就可以不用这么麻烦，例如使用一键式js API（官方文档有介绍）
    window.handleCredentialResponse = this.handleCredentialResponse.bind(this);
}

loadGoogleJS() {
    const styleTag = document.createElement('script');  
    styleTag.src = `https://accounts.google.com/gsi/client`;
    styleTag.async = true;
    styleTag.defer = true;
    document.head.appendChild(styleTag);
}

// 回调函数
handleCredentialResponse(value) {
    console.log('google login', value);
    this.loginByIdToken(value.credential);
    this.setState({
      IdToken: value.credential || null,
    });
}

...

render(){
    <div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     // data-login_uri="https://your.domain/your_login_endpoint"
     data-callback="handleCredentialResponse" // 传入回调函数的字符串
     data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
    </div>
}

    这里需要重点注意的就是回调函数的写法和指向问题，直接写this.handleCredentialResponse无效，不知道为什么，可能是this指向不同，而再将this从window指向组件是为了下一步的处理

  5. 按要求配置好后点击登录就可以获得token，将token传给后端就可继续处理。

    （后端部分nodejs还在研中，待更新……）

avatar
文章
阅读
粉丝