Контекционированный пользовательский интерфейс

Я изучал настройку входа в систему для веб-приложения, которое позволяет клиентам просматривать данные, размещенные на S3, и обнаружил, что AWS Cognito имеет размещенный веб-интерфейс [ link], который обрабатывает большую часть потока аутентификации для меня, проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как интегрировать вывод веб-интерфейса в мое приложение. Большая часть существующей документации в Cognito просто ссылается на то, как использовать различные API в создании собственного пользовательского интерфейса, что оставляет меня с запутанными ответами на мою проблему.

Есть ли какая-либо информация, которая была создана с учетом пользовательского интерфейса Cognito?

Amazon говорит, что вы можете интегрировать аутентифицированный логин с Cognito за несколько минут, но я смотрел на это несколько недель и не могу понять это.

ОТВЕТЫ

Ответ 1

Я также боролся с этим; Я согласен с тем, что документация немного освещена.

Указанная вами ссылка показывает, как выглядит ваш URL-адрес пользовательского интерфейса Cognito:

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

Идея состоит в том, что вы отправляете своего пользователя в этот URI, они занимаются своим делом, а затем перенаправляются обратно к вам с помощью своего рода токенов или кода. Вы можете проверить свой домен, нажав "Доменное имя" в левой панели навигации.

Настройки клиента приложения и типы предоставления OAuth

Сначала проверьте настройки вашего приложения. Вам нужно будет переименовывать URL-адреса обратного вызова (где Cognito будет перенаправляться обратно) и убедиться, что разрешен хотя бы один поток OAuth.

Настройки клиента Cognito App

"Предоставление кода авторизации" вернет код авторизации, который затем вы отправите в конечную точку oauth2/token, чтобы получить access_token, id_token и refresh_token. Это хороший выбор, если у вас есть фоновое приложение и вы хотите обновить токены.

"Явное предоставление" - это то, что я использую в своем внешнем приложении. Он вернет токен доступа и токен идентификатора непосредственно в моем интерфейсном приложении.

Чтобы использовать неявное предоставление, измените response_type=code на response_type=token в URL-адресе Cognito UI.

Неявный пример гранта

Итак, если ваша переадресация после успешной проверки подлинности выглядит так:

https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600

Вам просто нужно очистить id_token от URL-адреса и отправить его в Cognito, а ваш пул пользователей - в качестве ключа на карте Logins. В Javascript:

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c',
    Logins: {
        'cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx': idToken
    }
});

Где idToken - это токен идентификатора, который вернулся к вам при перенаправлении.

Тип разрешения кода авторизации

Если вместо этого вы используете тип предоставления кода авторизации (response_type = code), ваш задний конец должен будет вызвать конечную точку /oauth2/token для обмена кодом для токенов. Этот вызов будет выглядеть примерно так:

curl -X POST \
  https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d 'grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2'

Затем вы можете передать этот токен идентификатору Cognito, как указано выше.

Примечания к пользовательскому интерфейсу

Мое приложение выдает пользовательский интерфейс Cognito на новой вкладке, когда пользователь нажимает на ссылку. Когда перенаправление возвращается в мое приложение, я использую postMessage() для отправки токенов в родительское окно, которое затем закрывает новую вкладку. Я думаю, что это довольно распространенная картина.

Я не пробовал, но я предполагаю, что отображение пользовательского интерфейса в iframe запрещено, как смягчение против нажатия. Источник

Я надеюсь, что это, по крайней мере, несколько полезно. Удачи!

Ответ 2

Я реализовал этот поток, не используя Amplify, а просто используя Cognito Hosted UI:

  1. Пользователь переходит на мой сайт (вкладка 1), и на любой странице пользователь нажимает кнопку входа/регистрации.
  2. Новая вкладка (вкладка 2) открыта в пользовательском интерфейсе cognito, размещенном на моем собственном домене (auth.example.com).
  3. Затем пользователь делает свой бизнес на размещенном интерфейсе (логин/новая учетная запись/восстановление пароля и т.д.)
  4. Cognito отправляет HASH в URL-адресе (с множеством токенов) для обратного вызова моего сайта (https://example.com/login).

  5. Мой сайт обрабатывает токены: хитрость в том, чтобы создать экземпляр Auth, этот может проанализировать хеш и создать пользователя в LocalStorage:

    // mysite.com/login 
import {CognitoAuth} from 'amazon-cognito-auth-js';

// Configuration for Auth instance.
var authData = {
    UserPoolId: 'us-east-1_xxxx',
    ClientId: '1vxxxxx',
    RedirectUriSignIn : 'https://example.com/login',
    RedirectUriSignOut : 'https://example.com/logout',
    AppWebDomain : 'example.com',
    TokenScopesArray: ['email']
    };
var auth = new CognitoAuth(authData);

//Callbacks, you must declare, but can be empty. 
auth.userhandler = {
    onSuccess: function(result) {

    },
    onFailure: function(err) {
    }
};

//Get the full url with the hash data.
var curUrl = window.location.href;


//here is the trick, this step configure the LocalStorage with the user.
auth.parseCognitoWebResponse(curUrl);
window.top.close();

  6. После установки пользователя в локальном хранилище обратный вызов (вкладка 2) закрывается.

  7. На моем сайте (вкладка 1) я настраиваю EventListener для прослушивания, если есть изменения в локальном хранилище.

          constructor() {
      window.addEventListener('storage', this.userLogged);
      }

      userLogged(event) {

        if (event.key.indexOf('CognitoIdentityServiceProvider') !== -1) {

          var data = {
                      UserPoolId: 'us-east-1_xxxxx',
                      ClientId: 'xxxxx'
                      };

         var userPool = new CognitoUserPool(data);

         //behind the scene getCurrentUser looks for the user on the local storage. 
         var cognitoUser = userPool.getCurrentUser();
            }
       }
  8. С CognitoUser вы сделали, потому что вы можете получить учетные данные или другие данные.

Ответ 3

Чтобы использовать размещенный пользовательский интерфейс, необходимо указать доменное имя, в котором размещен пользовательский интерфейс. Вам также необходимо установить URI перенаправления - один для входа после, другой для выхода после. Вы делаете оба в Консоли AWS, на странице настроек для пула пользователей Cognito.

Замените установленные вами URI в следующем формате: {URL-адрес домена}/login? Response_type = code & client_id = {ID клиента приложения} & redirect_uri = {URL-адрес обратного вызова}

Например: https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

Этот адрес отображает форму входа. После входа пользователь перенаправляется на https://my-website.com с кодом, добавленным к URI, например: https://my-website.com?code=f0ee2961-f349-44c7-92b1-0400c762573b

Источник

Справочник по API - объясняет шаблон для /login,/logout и других конечных точек.