Как разрешить регистрацию новых пользователей и зарегистрироваться через стороннюю организацию, например Facebook, с помощью AWS Cognito?

В моем приложении Angular / NodeJS я сейчас использую AWS Cognito для управления своими пользователями. Он позволяет пользователям регистрироваться со своим адресом электронной почты и входить в систему с помощью своего адреса электронной почты и пароля.

Я хотел бы разрешить пользователям регистрироваться и входить в систему с помощью третьих лиц, таких как Facebook и Google. То есть, войдя в свою учетную запись Facebook, для них будет создана учетная запись пользователя в Cognito, аналогичная учетным записям для любых других пользователей.

На AWS нет четкой документации, как это сделать. Ближайшее, что я смог найти, - это здесь (код ниже), но это касается только временной аутентификации и не создает новую учетную запись пользователя в пользовательском пуле.

Как можно интегрировать стороннюю аутентификацию с существующим приложением на основе Cognito?

button id="login">Login</button>
<div id="fb-root"></div>
<script type="text/javascript">
var s3 = null;
var appId = '1234567890'; // Facebook app ID
var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({appId: appId});

  document.getElementById('login').onclick = function() {
    FB.login(function (response) {
      if (response.authResponse) { // logged in
        AWS.config.credentials = new AWS.WebIdentityCredentials({
          RoleArn: roleArn,
          ProviderId: 'graph.facebook.com',
          WebIdentityToken: response.authResponse.accessToken
        });

        s3 = new AWS.S3;

        console.log('You are now logged in.');
      } else {
        console.log('There was a problem logging you in.');
      }
    });
  };
};

// Load the FB JS SDK asynchronously
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

person CodyBugstein    schedule 03.01.2018    source источник


Ответы (1)


Вы можете легко сделать это, настроив социальных провайдеров, таких как Facebook, Google и т. Д., Прямо в вашем пользовательском пуле. См. этот документ о том, как Сделай так. Обратите внимание, что вам также необходимо добавить сопоставления между атрибутами Userpool и утверждениями токенов, возвращаемыми из Idps, таких как Google и Facebook. Вы можете увидеть, как это сделать, здесь. Обратите внимание, что для использования стороннего входа необходимо использовать пул пользователей Cognito интеграция приложения. Самый простой способ сделать это - использовать размещенный (встроенный) пользовательский интерфейс Cognito Userpool. Доступ к пользовательскому интерфейсу можно получить, введя URL домена с соответствующими параметрами (особенно важна часть параметров).

AWS предоставляет Javascript SDK - Amazon Cognito Auth SDK - для использования интеграции их приложений. функция, которая упрощает использование сторонних IdP, таких как Google и Facebook. Обратите внимание, что этот SDK представляет собой простой клиентский SDK Cognito и отличается от основного AWS JS SDK и Amazon Cognito Identity SDK. Взгляните на примеры и варианты использования, описанные на странице Github.

Если все настроено правильно, когда вы входите в систему с помощью Google, facebook и т. Д., Новый пользователь будет автоматически создан Cognito с информацией, доступной в токене, возвращаемом Google, Facebook и т. Д.

person agent420    schedule 05.01.2018
comment
Я пробовал это. Я читал этот документ с Amazon. Однако он объясняет только, как настроить Facebook в качестве провайдера из пользовательского интерфейса Cognito, но не то, как вы на самом деле реализуете его в своем коде внешнего интерфейса. Как работает вход в Facebook в моем внешнем приложении Angular? Пользователь авторизуется через Facebook SDK, получает токен FB .... и что дальше? - person CodyBugstein; 05.01.2018
comment
Вы не должны использовать Facebook SDK. Вы используете размещенный пользовательский интерфейс Cognito; нажмите «Войти через Facebook», и вы будете перенаправлены на страницу входа в Facebook. Введите свой пароль, и вы будете перенаправлены в свое приложение с токенами как частью URL-адреса. - person agent420; 05.01.2018
comment
У вас есть ссылка, как это сделать? - person CodyBugstein; 05.01.2018
comment
А что, если я хочу использовать свой собственный интерфейс? Есть ли способ сделать это? - person CodyBugstein; 05.01.2018
comment
Чтобы проверить это, откройте размещенный пользовательский интерфейс. Это должно быть https: // ‹domain_prefix› .auth. ‹Region› .amazoncognito.com / login? Redirect_uri = ‹your_redirect_uri› & response_type = token & client_id = ‹client_id_value› - person agent420; 05.01.2018
comment
Большое спасибо! Очень любезно с вашей стороны! Я попробую! - person CodyBugstein; 05.01.2018
comment
Я буду использовать размещенную страницу пользовательского интерфейса, но в будущем мне любопытно, есть ли способ сделать это с полностью настраиваемым пользовательским интерфейсом. В ссылке на stackoverflow, которой вы делитесь, вы предлагаете, чтобы кнопка Facebook понравилась Cognito, но на самом деле это не решение. Либо большое спасибо за вашу помощь - person CodyBugstein; 05.01.2018
comment
В решении для настраиваемого пользовательского интерфейса, хотя вы связываете свою настраиваемую кнопку Facebook с Cognito, нажатие на нее напрямую приведет вас к входу в систему Facebook. Вы не увидите пользовательский интерфейс Cognito - person agent420; 05.01.2018
comment
А как насчет пользовательского интерфейса, в котором есть форма имени пользователя / пароля И кнопка входа в Facebook? - person CodyBugstein; 05.01.2018
comment
Вы имеете в виду форму для входа с использованием собственных учетных записей пользовательского пула вместе с кнопкой для входа в facebook? Для этих собственных учетных записей пула пользователей используйте SDK когнитивной идентификации. Для Facebook используйте метод перенаправления. - person agent420; 05.01.2018
comment
Давайте продолжим это обсуждение в чате. - person CodyBugstein; 07.01.2018