React+AWS Cognito教程四：Cognito中的用户自定义属性

在上两篇文章介绍了如何注册，配置AWS Cognito User Pool，用户登录，Cognito中的Session，如何注销用户的登录，实现更改密码的功能。下面介绍如何Cognito中的用户自定义属性。

AWS Cognito

声明：本教程代码参考了Alexzander Flores的代码并在其基础上进行了修改和优化。

AWS Cognito系列教程：

• React+AWS Cognito教程一：创建User Pool并实现用户注册及用户登录
• React+AWS Cognito教程二：Cognito中的Session及注销登录
• React+AWS Cognito教程三：在Cognito中更改密码
• React+AWS Cognito教程四：使用Cognito中的自定义属性
• React+AWS Cognito教程五：通过AWS Cognito UserPool保护APIGateway
• React+AWS Cognito教程六：Cognito内置的OAuth支持-使用Google登录
• Cognito中的细粒度用户访问授权

用户默认属性及自定义属性

在AWS Cognito的UserPool中又很多系统默认属性，这些属性在创建UserPool的时候可以进行选择。一旦选择结束并创建了UserPool之后，就不可更改，因此在创建的时候需要慎重考虑。

AWS Cognito

但对于自定义用户属性而言，可以在创建了UserPool之后进行添加。比如添加一个”status”属性。但需要注意的是，自定义属性的类型只能是字符串或者数字类型。

AWS Cognito

之后在React中访问这个自定义属性的时候，其键值是”custom:status”。但对于标准属性的话，其键值之前就没有”custom:”了。

更新App clients的权限

进入User Pool > General settings > App clients中，确认App对自定义属性的读写权限被勾选：

AWS Cognito

实现Attributes.js组件

javascript

import React, { useEffect, useContext, useRef } from "react";
import { CognitoUserAttribute } from "amazon-cognito-identity-js";
import { AccountContext } from "./Accounts";

export default function Attributes() {
  const statusElement = useRef('');

  const { getSession } = useContext(AccountContext);

  useEffect(() => {
    getSession().then((data) => {
      statusElement.current.value = data["custom:status"];  
    });
  }, []);

  const onSubmit = (event) => {
    event.preventDefault();

    getSession().then(({ user }) => {
      const attributes = [
        new CognitoUserAttribute({ Name: "custom:status", Value: statusElement.current.value }),
      ];

      user.updateAttributes(attributes, (err, result) => {
        if (err) console.error(err);
        console.log(result);
      });
    });
  };

  return (
    <div>
      <h1>Update your status:</h1>
      <form onSubmit={onSubmit}>
        <input type="text" ref={statusElement}/>

        <button type="submit">Change status</button>
      </form>
    </div>
  );
};