React Google/Facebook登录流程-解释

Question

我必须在我的React应用程序中实现Google/Facebook登录功能。我现在所拥有的是添加的两个按钮(一个用于G，另一个用于FB)，它们对应的代码是：

<GoogleLogin
    className={"googleLoginButton"}
    buttonText=""
    clientId=""
    onSuccess={this.googleResponseOnSuccess}
    onFailure={this.googleResponseOnFailure}
>
    <FontAwesomeIcon icon={faGoogle} />
</ GoogleLogin>

<FacebookLogin
    appId=""
    autoLoad={false}
    cssClass="facebookLoginButton"
    textButton = ""
    icon={<FontAwesomeIcon icon={faFacebook} />}
    fields="name,email,picture"
    callback={this.facebookResponseCallback}
    onClick={this.facebookResponse}
/>

谁能解释一下整个流程，从点击G/FB按钮(当弹出窗口出现时)到休息，之后该怎么做？什么是onSuccess和onFailure函数，当它们被调用用于谷歌登录时，什么是用于脸书登录的callback和onClick？有没有人能举例说明如何处理所有这些过程，直到成功登录？

Answer 1

Google Developer Console上的谷歌 Create应用程序

库:react-google-login

<GoogleLogin
        clientId="clientKey"
        buttonText="Login"
        onSuccess = { (responseGoogle) => console.log("success",responseGoogle) }
        onFailure = { (responseGoogle) => console.log("error",responseGoogle) }
      />

备注您的react URL必须与您在开发人员控制台上的Authorized JavaScript origins选项卡中提到的URL相匹配。

在Facebook Developer my apps标签页创建Facebook。

库react-facebook-login在登录调用中使用appId，如下所示

 <FacebookLogin
    appId="appId here"
    autoLoad={true}
    fields="name,email,picture"
    callback={(res)=>console.log(res)} />

现在令牌，它将弹出窗口做登录，它将return令牌发送这个令牌到后端服务器。服务器将使用应用程序secrete-key验证此token，并将接收登录的用户详细信息。在服务器端(在我的例子中，解释是关于nodejs作为服务器端技术)，您需要使用passportjs