使用 Amplify 的 federatedSignIn 使用 Cognito 用户池登录 Facebook

Posted 2023-03-27

【中文标题】使用 Amplify 的 federatedSignIn 使用 Cognito 用户池登录 Facebook

【英文标题】：Facebook Login with Cognito User Pools using Amplify's federatedSignIn

【发布时间】：2021-10-07 23:34:44

【问题描述】：

我正在尝试使用 aws-amplify 在 React 项目中使用 Cognito 用户池登录 Facebook。

我想我已经按照各种docs 正确设置了 Facebook 应用程序和 Cognito 用户池。请注意，我使用的是用户池而不是联合身份。

我在 React 方面有点卡住和困惑。我尝试了几个不同的guides，但结果都一样...

登录按钮触发此代码：

  Auth.configure(
    oauth: 
      domain: 'xxxxxxxxx.auth.eu-west-2.amazoncognito.com',
      redirectSignIn: process.env.REACT_APP_FACEBOOK_REDIRECT_SIGN_IN,
      redirectSignOut: process.env.REACT_APP_FACEBOOK_REDIRECT_SIGN_OUT,
      responseType: 'token'
    ,
    region: process.env.REACT_APP_AWS_REGION,
    userPoolId: process.env.REACT_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID
  )
  Auth.federatedSignIn(provider: 'Facebook')

点击登录按钮后，页面被重定向并在 url 中以这个哈希结束：

https://localhost:3000/sign-in#access_token=xxx&state=xxx&token_type=Bearer&expires_in=3600

如果我随后调用Auth.currentAuthenticatedUser()，我将没有用户（“用户未通过身份验证”），如果我尝试Hub.listen("auth")，则被触发的唯一事件是parsingCallbackUrl 和configured - 页面然后被重定向，并且永远不会触发 signIn 事件。

如果我然后再次点击登录按钮（当 url 有带有 access_token 等的哈希值时），我将成功登录。如果我删除哈希值并尝试登录，它会像上面一样失败.

有什么想法吗？我需要自己处理来自哈希的访问令牌吗？为什么Auth.federatedSignIn 似乎只有在访问令牌已经在哈希中时才有效？

【参考方案1】：

我刚刚解决了... Auth.configure 调用需要从组件中移出并移到 App.js 中。现在似乎一切正常。