Рубрики
Без рубрики

Управление пользователем с AWS Cognito – (2/3) Основная функциональность

Управление пользователями Kangze Huang с AWS Cognito – (2/3) Core FunctionalityThte Complete Web Boaterplate AWS – Учебное пособие 1bmain Содержание Нажмите здесь, нажмите: Начальный Setuppart B: Основная функциональная функция Phance CART C: Последние шаги на Full FleddedDownload Github здесь. JavaScript Cognito SDKGreat! Вы должны быть только здесь, если

Автор оригинала: FreeCodeCamp Community Member.

Kangze Huang

Полная веб-ботинка AWS – Учебное пособие 1b

Скачать github здесь Отказ

JavaScript Cognito SDK

Большой! Вы должны быть здесь только если вы закончите начальную настройку для Cognito и Federated Identies. Теперь, когда у нас все настроено, пришло время пройти через код JavaScript. Скачать . Kangzeroo Boaterplate на Github И обязательно войдите в филиал Cognito, где мы будем делать нашу работу.

$ git clone https://github.com/kangzeroo/Kangzeroos-Complete-AWS-Web-Boilerplate.git$ cd Kangzeroos-Complete-AWS-Web-Boilerplate$ git checkout Cognito$ cd App

Котельная использует Amazon-Cognito-Identity-JS Библиотека найдена на Github . Эта библиотека делает его действительно простым в использовании программированных AWS Cognito, но та же функциональность можно найти в родном aws-sdk. . Итак, давайте пойдем и установим наши зависимости и загрузите приложение.

$ npm install$ npm run start

AWS Profile Setup.

Перейдите к Приложение/SRC/Компоненты/AUTH Где мы найдем все компоненты реагирования, связанные с аутентификацией Cognito. Да, этот учебник использует реагирование, но вы можете легко применять одни и те же уроки для других структур JS. Перейти к Приложение/SRC/API/AWS/AWS-COGNITO.JS где находится большая часть кода Cognito AWS. Давайте посмотрим на зависимости и как мы можем настроить наш собственный профиль AWS.

// aws-cognito.js
import { CognitoUserPool, CognitoUserAttribute, CognitoUser, AuthenticationDetails, CognitoIdentityCredentials, WebIdentityCredentials } from 'amazon-cognito-identity-js';
import { userPool, LANDLORD_USERPOOL_ID, LANDLORD_IDENTITY_POOL_ID, TENANT_IDENTITY_POOL_ID } from './aws_profile'
import uuid from 'node-uuid'

Мы импортируем различные функции из Amazon-Cognito-Identity-JS а также из ./aws_profile.js. . Функции от Amazon-Cognito-Identity-JS будет объяснено, когда мы идем вместе. То, что мы хотим сосредоточиться на том, это ./aws_profile.js вещи. Вот где мы поставили наши когнитозы, такие как наши USERPOOLID и APPIDS. Давайте посмотрим на ./aws_profile.js. .

import { CognitoUserPool } from 'amazon-cognito-identity-js';import 'amazon-cognito-js'
const REGION = "us-east-1"const USER_POOL_ID = 'us-east-1_6i5p2Fwao'const CLIENT_ID = '5jr0qvudipsikhk2n1ltcq684b'
AWS.config.update({ region: REGION})
const userData = {    UserPoolId : USER_POOL_ID,    ClientId : CLIENT_ID}
export const userPool = new CognitoUserPool(userData);
export const USERPOOL_ID = 'cognito-idp.'+REGION+'.amazonaws.com/'+USER_POOL_ID
export const IDENTITY_POOL_ID = 'us-east-1:65bd1e7d-546c-4f8c-b1bc-9e3e571cfaa7'

Здесь мы устанавливаем наши AWS область , Cognito User_pool_id. и приложение Cognito ID КЛИЕНТА . Мы также создаем CognitouserPool объект из нашего User_pool_id. и Client_id , который содержит большую часть наших функций Cognito. CognitouserPool Имеет функции для всего, что начиная от пароля сбрасывается для аутентификации нового пользователя. Мы создаем CognitouserPool Вот так, чтобы нам не приходилось повторить его для каждой функции. Мы также создали наши Userpool_id который является URL, который требуется в некоторых функциях Cognito и состоит из User_pool_id. и область . Наконец, мы также экспортируем ARN наших федеративных идентичностей пула, которые также требуются в некоторых функциях Cognito. Все вообще, это просто настройка, и вам нужно только копировать и вставлять свои собственные значения.

Набор последней настройки, мы создадим массив наших пользовательских атрибутов в верхней части нашего aws_cognito.js файл. Заполните массив своими собственными атрибутами пользователя и не забудьте префикнуть любые пользовательские атрибуты с помощью Пользовательский: для Const attrs . Const Landlordattrs не требует Пользовательский: приставка.

// we create an array of all attributes, without the `custom:` prefix. // This will be used for building the React-Redux object in plain JS, hence no AWS Cognito related name requirementsconst landlordAttrs = ["email", "agentName", "id"]
// we create an array of all our desired attributes for changing, and we loop through this array to access the key name.// This will be used for AWS Cognito related name requirementsconst attrs = ["custom:agentName"]

Теперь после настройки и перед началом реального кода я должен сказать, что эта котельная завершена. Вы не обязательно должны знать, что происходит за кулисами. Вы можете просто использовать эту бойную табличку, и все функции будут работать из коробки: регистрация, вход, проверка электронной почты, сброс пароля, изменения пользователей Изменения и сохраненные логины, использующие JWT. Обратите внимание, что любые письма, которые вы используете в Cognito, должны быть проверены AWS, пока вы просьба оставлять AWS SES SANDBOX (в этом случае вы сможете сообщить о любом электронном письме). Если вы здесь только для рабочей котельной, это так далеко, насколько вам нужно прочитать. Если вы хотите знать, что происходит, продолжить чтение!

Зарегистрируйтесь пользователей

Давайте посмотрим на первый компонент Auth Vick Signup.js. . Я не буду тратить время, объясняя реагированную сторону вещей, так как это не цель этого учебника. Go Найти эту функцию:

signup(){
...
// call the AWS Cognito function that we named `signUpUser`    signUpUser(this.state)     .then(({email})=>{      // if successful, then save the email to localStorage so we can pre-fill the email form on the login & verify account screens      localStorage.setItem('User_Email', email)      // re-route to the verify account screen      browserHistory.push('/auth/verify_account')     })
...
}

Здесь мы называем подписи () и прохождение в состоянии реагирования компонента, которое выглядит так:

this.state = {   email: "",   agentName: "",   password: "",   confirmPassword: "",   errorMessage: null,   loading: false}

Мы будем использовать только атрибуты электронной почты и пароля состояния, когда мы передаем его в подписи () Отказ подписи () Функция находится в Приложение/SRC/API/AWS/AWS-COGNITO.JS Отказ

export function signUpUser({email, agentName, password}){ const p = new Promise((res, rej)=>{
  const attributeList = []
  const dataEmail = {      Name : 'email',      Value : email  }  const dataAgentName = {      Name : 'custom:agentName',      Value : agentName  }
  const attributeEmail = new CognitoUserAttribute(dataEmail)  const attributeAgentName = new CognitoUserAttribute(dataAgentName)
  attributeList.push(attributeEmail, attributeAgentName)
  userPool.signUp(email, password, attributeList, null, function(err, result){      if (err) {          rej(err)          return      }      res({email})  }) }) return p}

подписи () Принимает объект, который должен иметь 3 атрибута: Email , пароль и имя агента . Для того, чтобы сохранить его как атрибут нашего пользователя Cognito, мы должны сделать Cognitouserattribute объект для каждого. Мы делаем это, создавая Dataemail и Dataagentname Объект с именем атрибута и его значение. Эти объекты будут переданы в Cognitouserattribute Функция, которая преобразует его на читаемые объекты AWS Cognito, которые мы называемым атрибутр и attributeagentname. . Обратите внимание, что dataagentname.name префикс с Пользовательский: Указать, что Cognito, что Agentname это пользовательский атрибут пользователя. Теперь, когда у нас есть наш Cognitouserattribute Объекты, мы толкаем их в Атрибутлист множество.

Следующая строка кода – это то, что фактически регистрирует этот новый пользователь. Мы используем UserPool объект, который мы импортировали из ./aws_profile.js. и позвонить его Регистрация функция. Первые 3 аргумента являются уникальным идентификатором Эл. адрес , пароль и Атрибутлист множество. Четвертый аргумент – это нулевой, а пятый – обратный вызов. В обратном вызове мы отвергаем обещание, произошла ли ошибка, и если нет ошибок, то мы разрешаем обещание. В котельной, мы возвращаем электронное письмо, которое будет сохранено в локальную табличку в нашем реактивный компонент, но это не обязательно. Вы можете решить обещание ни с чем. Новый пользователь Cognito был создан. Но для того, чтобы использовать новый пользователь, они должны быть в состоянии проверить их аккаунт. Инфраструктура AWS для этого уже была настроена, поэтому теперь все, что нам нужно сделать, это пройти через код функции проверки.

подтвердить учетную запись

Мы не будем тратить слишком много времени на эту часть кода, поэтому я сначала объясню компонент React-redux на высоком уровне, а затем перейти к деталям с вещами AWS.

На высоком уровне, что происходит после того, как пользователь подписывается, это то, что они перенаправлены Реагистрационный маршрутизатор к /verify_account URL, где Приложение/SRC/Компоненты/auth/verifyaccount.js Появится компонент. Когда компонент установлен, поле электронной почты автоматически заполняется доступом к локальный . Тогда у нас есть возможность ввести PIN-код проверки, отправленного в электронную почту пользователя, или выберите для сброса и отправки PIN-кода проверки. Давайте посмотрим на READVERICICESPIN () Функция в Приложение/SRC/API/AWS/AWS-COGNITO.JS Отказ

export function resetVerificationPIN(email){ const p = new Promise((res, rej)=>{  const userData = {   Username: email,   Pool: userPool  }  const cognitoUser = new CognitoUser(userData)  cognitoUser.resendConfirmationCode(function(err, result) {         if (err) {          rej(err)          return         }         res()     }) }) return p}

Когда мы называем эту функцию, нам нужно только пройти в электронном письме. Cognito автоматически проверяет, что электронная почта существует и бросает ошибку, если это не так. Как в Signup.js мы создаем userdata Объект, содержащий электронную почту нашего пользователя и UserPool Imported из ./aws_profile.js. Для того, чтобы создать VLIAD КОГНИТЕР объект. Использование КОГНИТЕР объект, мы можем позвонить ResendConfirmationCode () Чтобы пин снова отправлен снова. Вот и все!

Теперь давайте посмотрим на verifyuseraccount () Функция:

export function verifyUserAccount({email, pin}){ const p = new Promise((res, rej)=>{  const userData = {   Username: email,   Pool: userPool  }  const cognitoUser = new CognitoUser(userData)  cognitoUser.confirmRegistration(pin, true, function(err, result) {         if (err) {             console.log(err);             rej(err)             return;         }         if(result == "SUCCESS"){          console.log("Successfully verified account!")          cognitoUser.signOut()          res()         }else{          rej("Could not verify account")         }     }) }) return p}

verifyuseraccount () Принимает объект как единственный аргумент, содержащий 2 основных атрибутов Email и штырь . Мы создаем еще один userdata объект для создания КОГНИТЕР Для того, чтобы позвонить в Подтверждениерегистрация () функция. В Подтверждениерегистрация () мы проходим в штырь , правда и обратный вызов. Если подтверждение успешно успешно, мы выходим из системы Cognitouser (чтобы мы могли войти снова и обновить пользователь). Если это выгодно, то мы отвергаем обещание. Довольно легко, так как SDK абстрагировал много деталей. После успешной проверки компонент React должен повторно направить вас на страницу входа.

Знак пользователей

Давайте посмотрим на следующий компонент Приложение/SRC/Компоненты/auth/login.js . Найти следующую функцию:

signin(){  this.setState({loading: true})  signInUser({   email: this.state.email,   password: this.state.password  }).then((userProfileObject)=>{   localStorage.setItem('User_Email', this.state.email)   this.props.setUser(userProfileObject)   browserHistory.push('/authenticated_page')  })  .catch((err)=>{   this.setState({    errorMessage: err.message,    loading: false   })  }) }

Что здесь происходит? Сначала мы называем Signinuser () Функция Cognito Чтобы войти в систему и получить детали пользователя от Cognito. Далее в цепочке обещания мы сохраняем электронную почту пользователя на локальный Так что мы можем автоматически установить почтовый адрес следующий логин. Мы также сохраняем пользователя в состояние Redux, используя this.props.SetUser () который является функцией действия Redux, расположенная в Приложение/SRC/Действия/auth_actions.js . Мы не будем покрывать материал React-Redux, так как это не в центре внимания этого урока. Давайте посмотрим на функцию AWS Cognito.

Найти Signinuser () на Приложение/SRC/API/AWS/AWS-COGNITO.JS Отказ Вот как это выглядит:

export function signInUser({email, password}){ const p = new Promise((res, rej)=>{
  const authenticationDetails = new AuthenticationDetails({   Username: email,   Password: password  })
  const userData = {   Username: email,   Pool: userPool  }  const cognitoUser = new CognitoUser(userData)
  authenticateUser(cognitoUser, authenticationDetails)   .then(()=>{    return buildUserObject(cognitoUser)   })   .then((userProfileObject)=>{    res(userProfileObject)   })   .catch((err)=>{    rej(err)   })
 }) return p}

Мы создаем Аутентификация Объект Cognito, содержащий пользователь Эл. адрес и пароль . Мы также создаем КОГНИТЕР объект для использования для его Аутентификатор () Функция, но уведомление Аутентификатор () не объявляется нигде в функции или в верхней части страницы, где мы перечисляем зависимости. Это потому, что Аутентификатор () Еще одна функция объявлена дальше вниз по странице. Другая функция, объявленная на странице, является BuildUserObject () , который принимает атрибуты пользователя из Cognito и форматирует их в пользовательский объект, который мы хотим использовать в состоянии redux. В конце цепочки обещания мы возвращаем userprofileobject. что BuildUserObject () выходы. Давайте пройдем по цепочке обещания, начиная с Аутентификатор () Отказ 

function authenticateUser(cognitoUser, authenticationDetails){ const p = new Promise((res, rej)=>{
  cognitoUser.authenticateUser(authenticationDetails, {
         onSuccess: function (result) {             localStorage.setItem('user_token', result.accessToken.jwtToken)             const loginsObj = {                 [USERPOOL_ID]: result.getIdToken().getJwtToken()             }       AWS.config.credentials = new AWS.CognitoIdentityCredentials({                 IdentityPoolId : IDENTITY_POOL_ID,                  Logins : loginsObj             })             AWS.config.credentials.refresh(function(){              console.log(AWS.config.credentials)             })             res()         },
         onFailure: function(err) {             rej(err)         }
     })
 }) return p}

Аутентификатор () берет КОГНИТЕР и аутентификация Аргументы и используют его для 2 вещей. КОГНИТЕР имеет функцию в нем под названием Аутентификатор () Что мы будем призывать к входам в aws cognito. Первый аргумент, в котором мы проходим аутентификация (который содержит электронную почту + пароль), а второй аргумент является объектом с OnSuccess и OnFailure Перезвоните. Довольно простые, OnFailure будет просто отклонить цепочку обещания. OnSuccess будет содержать Результат , который будет иметь токен JWT, используемый для будущей аутентификации, не требуя ввода пароля. Мы сохраняем JWT в LocalStorage И извлечь его всякий раз, когда нам это нужно (Backend аутентификация для ресурсов или автоматического входа). Далее мы создаем loginsobj который содержит ценность нашего User_pool_id. и токен JWT. Мы проходим в этом loginsobj к экземпляру Aws.config.credentials Использование Новые aws.cognitoIdentityCredentials () вместе с Идентификацияполей . Что это делает, это зарегистрировать вход в систему с AWS Federated Identies. Напомним, что федеративные идентичности используются для управления логинами из нескольких источников, поэтому имеет смысл, что мы используем федеративные идентификаторы для записи успеха входа в систему каждого входа в систему.

После настройки Aws.config.credentials. Теперь мы можем использовать аутентификацию Cognito, чтобы запросить другие услуги Amazon. Конечно, эти услуги должны быть сконфигурированы для того, чтобы белить определенным Cognito Auth (и отклонить другие запросы), но это будет показано в будущих учебных пособиях на основе каждого обслуживания. В любом случае, после настройки Aws.config.credentials. Важно обновить учетные данные, используя Aws.config.credentials.refresh Так что AWS будет использовать последний, который мы только что добавили.

Теперь давайте перейдем к следующему шагу в Signinuser () Цепочка обещания: BuildUserObject () Отказ

function buildUserObject(cognitoUser){ const p = new Promise((res, rej)=>{  cognitoUser.getUserAttributes(function(err, result) {         if (err) {              rej(err)              return         }         let userProfileObject = {}         for (let i = 0; i < result.length; i++) {           if(result[i].getName().indexOf('custom:') >= 0){              let name = result[i].getName().slice(7, result[i].getName().length)              userProfileObject[name] = result[i].getValue()           }else{              userProfileObject[result[i].getName()] = result[i].getValue()           }         }         res(userProfileObject)     }) }) return p}

Сначала КОГНИТЕР Объект передается и используется для того, чтобы вызвать его getuserattributes () метод. Как всегда, мы отклоняем обещание, возникает ошибка. Если успех, то мы продолжаем создавать пустую userprofileobject. Это будет иметь структуру, соответствующую тому, что мы хотим на нашем фронте React-Redux. Результат Объект, который мы получаем от вызовов успеха, является массивом объектов CognitouseRattribute (вспомните Attributelist Array от finameupuser () ). Мы повторяем этот массив, используя для петли и получить имена каждого атрибута, отчитывая Пользовательский: префикс, если это необходимо. Затем мы также включаем значение атрибута, и добавьте пару ключ-значение на userprofileobject Отказ К концу цикла у нас будет наш законченный userprofileobject. в простых js. Мы возвращаем userprofileobject и завершить Signinuser () цепь обещания. Давайте посмотрим Signinuser () снова поток и соблюдайте поток на высоком уровне.

export function signInUser({email, password}){ const p = new Promise((res, rej)=>{
const authenticationDetails = new AuthenticationDetails({   Username: email,   Password: password  })
const userData = {   Username: email,   Pool: userPool  }  const cognitoUser = new CognitoUser(userData)
authenticateUser(cognitoUser, authenticationDetails)   .then(()=>{    return buildUserObject(cognitoUser)   })   .then((userProfileObject)=>{    res(userProfileObject)   })   .catch((err)=>{    rej(err)   })
}) return p}

Когда мы наконец разрешаем Signinuser () обещаю, мы вернем userprofileobject к компоненту реагирования. В компоненте реагирования Login.js Наблюдайте, что мы делаем после Signinuser () Отказ

signin(){  this.setState({loading: true})  signInUser({   email: this.state.email,   password: this.state.password  }).then((userProfileObject)=>{   localStorage.setItem('User_Email', this.state.email)   this.props.setUser(userProfileObject)   browserHistory.push('/authenticated_page')    })  .catch((err)=>{   this.setState({    errorMessage: err.message,    loading: false   })  }) }

Мы сохраняем электронную почту пользователя на LocalStorage Для будущего использования и добавить userprofileobject в состояние redux. Если какие-либо ошибки произошли во всем процессе, они будут пойманы и отображаться в this.state.errormessage Отказ Вот и все! Быстрая нота, чтобы указать: this.props.SetUser () это действие redux, которое установит userprofileobject Чтобы быть доступным на протяжении всего приложения Redux, мы хорошо проводятся логическими State.auth.authenticated к правда Отказ Приложение redux использует State.auth.authenticated Как средство определения того, должна ли определенная страница должна быть оказана или нет. Например, мы хотим только показать страницу профиля пользователя, если есть вошедший в систему.

Упаковочная часть 2

Ух ты, это была длинная статья! Но мы еще не закончены. Есть еще несколько тем, которые нам нужно покрыть, в том числе updateUserinfo () , ForgoPassword () , retreteuserFromLocalStorage () , SignateUser () и Backend аутентификация токенов JWT для ограниченных ресурсов. Я сказал, что это был полный урок AWS, не так ли? В любом случае, продолжите читать, если вы чувствуете, что вам нужно знать, что происходит под капотом. Просто помните, что в любое время вы можете перестать читать и просто использовать бойную табличку, как есть, и он просто будет работать. Я надеюсь, что вы нашли эту серию полезной до сих пор. Увидимся в Cognito Part 3!

Оригинал: “https://www.freecodecamp.org/news/user-management-with-aws-cognito-2-3-the-core-functionality-ec15849618a4/”

Читайте ещё по теме: