2016-08-04 18 views
1

Ich bekomme meine Füße nass mit AWS Cognito. Ich versuche, eine einfache HTML-Seite zu erstellen, die es Benutzern ermöglicht, sich mit ihrem Facebook-Konto anzumelden.AWS Cognito und FB Login

Ich habe in der AWS Cognito-Konsole einen Identitätspool eingerichtet und die korrekte App-ID in der FaceBook-Provider-Einstellung angegeben.

Ich habe jetzt die folgende HTML-Seite erstellt, die auf S3 gehostet wird. Der Authentifizierungsschritt über FaceBook funktioniert einwandfrei.

<!DOCTYPE html> 
<html> 
<head> 
<title>Facebook Login JavaScript Example</title> 
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.4.12.min.js"></script> 
<meta charset="UTF-8"> 
</head> 
<body> 
<script> 
    // This is called with the results from from FB.getLoginStatus(). 
    function statusChangeCallback(response) { 
    console.log('statusChangeCallback'); 
    console.log(response); 
    // The response object is returned with a status field that lets the 
    // app know the current login status of the person. 
    // Full docs on the response object can be found in the documentation 
    // for FB.getLoginStatus(). 
    if (response.status === 'connected') { 
     // Logged into your app and Facebook. 
     AWS.config.region = 'eu-west-1'; // Region 
     AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
     IdentityPoolId: 'eu-west-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', 
     Logins: { 
     'graph.facebook.com': response.authResponse.accessToken 
     } 
     }); 
     console.log(AWS.config); 
     testAPI(); 
    } else if (response.status === 'not_authorized') { 
     // The person is logged into Facebook, but not your app. 
     document.getElementById('status').innerHTML = 'Please log ' + 
     'into this app.'; 
    } else { 
     // The person is not logged into Facebook, so we're not sure if 
     // they are logged into this app or not. 
     document.getElementById('status').innerHTML = 'Please log ' + 
     'into Facebook.'; 
    } 
    } 

    // This function is called when someone finishes with the Login 
    // Button. See the onlogin handler attached to it in the sample 
    // code below. 
    function checkLoginState() { 
    FB.getLoginStatus(function(response) { 
     statusChangeCallback(response); 
    }); 
    } 

    window.fbAsyncInit = function() { 
    FB.init({ 
    appId  : 'xxxxxxxxxxxxxxx', 
    cookie  : true, // enable cookies to allow the server to access 
         // the session 
    xfbml  : true, // parse social plugins on this page 
    version : 'v2.5' // use graph api version 2.5 
    }); 

    // Now that we've initialized the JavaScript SDK, we call 
    // FB.getLoginStatus(). This function gets the state of the 
    // person visiting this page and can return one of three states to 
    // the callback you provide. They can be: 
    // 
    // 1. Logged into your app ('connected') 
    // 2. Logged into Facebook, but not your app ('not_authorized') 
    // 3. Not logged into Facebook and can't tell if they are logged into 
    // your app or not. 
    // 
    // These three cases are handled in the callback function. 

    FB.getLoginStatus(function(response) { 
    statusChangeCallback(response); 
    }); 

    }; 

    // Load the 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/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 

    // Here we run a very simple test of the Graph API after login is 
    // successful. See statusChangeCallback() for when this call is made. 
    function testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function(response) { 
     console.log('Successful login for: ' + response.name); 
     document.getElementById('status').innerHTML = 
     'Thanks for logging in, ' + response.name + '!'; 
    }); 
    } 
</script> 

<!-- 
    Below we include the Login Button social plugin. This button uses 
    the JavaScript SDK to present a graphical Login button that triggers 
    the FB.login() function when clicked. 
--> 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> 
</fb:login-button> 

<div id="status"> 
</div> 

</body> 
</html> 

Wenn ich jedoch die Identität Browser in der Konsole Cognito überprüfen, ich sehe keine Benutzer, nachdem sie über Facebook angemeldet.

Antwort

3

Sie müssen die Anmeldeinformationen tatsächlich vom Dienst abrufen, nachdem Sie die Parameter für die Anmeldeinformationen aktualisiert haben.

AWS.config.credentials.get(function(err) {...}); ist eine Möglichkeit, es zu tun.

Hier sind einige Blogposts, die Ihnen helfen können, den Code für JavaScript SDK einzurichten.

  1. https://mobile.awsblog.com/post/TxBVEDL5Z8JKAC/Use-Amazon-Cognito-in-your-website-for-simple-AWS-authentication
  2. https://blogs.aws.amazon.com/javascript/post/TxTUNTVES4AL15/Authentication-in-the-Browser-with-Amazon-Cognito-and-Public-Identity-Providers
  3. https://blogs.aws.amazon.com/javascript/post/Tx1F7FO6GDAIXD3/Authentication-with-Amazon-Cognito-in-the-Browser