reactjs React + AWS Cognito + AWS Amplify无法使用Amplify(Auth)对注册用户进行身份验证

ryevplcw 于 2023-06-29 发布在 React

关注(0)|答案(1)|浏览(91)

我正在使用ReactJS Web框架沿着AWS Cognito和Google注册，以使用AWS Amplify实现登录功能。

下面是代码：

import React from 'react'
import {Amplify,Auth } from 'aws-amplify'

const Amp = () => {
    Amplify.configure({
        Auth: {
            region: 'us-east-2',
            userPoolId: 'us-east-2_gD63AHLbv',
            userPoolWebClientId: '7kgfjpin3rpujpsgsc3tc2junt',
            oauth : {
                domain: '*****-app.auth.us-east-2.amazoncognito.com',
                redirectSignIn: 'http://localhost:3000/google',
                redirectSignOut: 'http://localhost:3000/google',
                scope : ['email', 'openid', 'profile', 'phone', 'aws.cognito.signin.user.admin'],
                responseType: 'code'
            },
        }
    })
     
    const checks = async () => {
        try {
        const user = await Auth.currentAuthenticatedUser()
        console.log(user)
        } catch (err) {
            console.log("Error:",err)
        }
    }

return(
<div>
<button onClick={() => {
    Auth.federatedSignIn()
}}>Hosted UI Signin</button>

<br/>

<button onClick={() => {
    Auth.federatedSignIn({provider:'Google'})
}}>Google Signin</button>

<br/>
<button onClick={() => {
    Auth.signOut()
}}>Signout</button>
<br/>

<button onClick={checks}>Check</button>

</div>

);

}
export default Amp;

运行此代码后，我成功地获得托管UI功能和谷歌注册

示例页面：

点击上面的Hosted UI按钮：

谷歌注册：

在点击我的gmail帐户登录时，我被成功重定向到指定的redirectURI。我点击注册的gmail帐户也存储在指定的Cognito用户池中。
但是，当我点击**“检查”**按钮检查当前登录的用户是否通过认证时。
它给出当前用户未通过身份验证的错误。我捕捉到了那个错误并显示在控制台中

电子邮件和密码注册也出现了同样的问题。
如何验证用户并在通过托管UI或Google注册后生成令牌？

reactjs

来源：https://stackoverflow.com/questions/76535358/react-aws-cognito-aws-amplify-not-able-to-authenticate-the-signed-up-user-us

1条答案

按热度按时间

uidvcgyl1#

您应该只在应用程序开始时执行一次Amplify.configure，而不是每次组件呈现时。
来自Amplify Social登录文档的这段代码片段似乎可以完成您正在尝试执行的操作：

import { useEffect, useState } from "react";
import { Text, View, Linking, Button } from "react-native";

import { Amplify, Auth, Hub } from "aws-amplify";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

export default function App() {
  const [user, setUser] = useState(null);
  const [customState, setCustomState] = useState(null);

  useEffect(() => {
    const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
      switch (event) {
        case "signIn":
          setUser(data);
          break;
        case "signOut":
          setUser(null);
          break;
        case "customOAuthState":
          setCustomState(data);
      }
    });

    Auth.currentAuthenticatedUser()
      .then(currentUser => setUser(currentUser))
      .catch(() => console.log("Not signed in"));

    return unsubscribe;
  }, []);

  return (
    <View>
      <Button
        title="Open Amazon"
        onPress={() =>
          Auth.federatedSignIn({
            provider: "LoginWithAmazon",
          })
        }
      />
      <Button title="Open Hosted UI" onPress={() => Auth.federatedSignIn()} />
      <Button title="Sign Out" onPress={() => Auth.signOut()} />
      <Text>{user && user.getUsername()}</Text>
    </View>
  );
}

还可以将Amplify的Authenticator组件（doc）与useAuthenticator钩子结合使用。您可以覆盖UI以获得所需的外观。

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs React + AWS Cognito + AWS Amplify无法使用Amplify(Auth)对注册用户进行身份验证

1条答案

相关问题

热门标签

最新问答