如何在反应原生中针对AWS cognito用户池对用户进行身份验证?

时间:2017-06-22 14:56:36

标签: reactjs amazon-web-services react-native aws-cognito

我有一个AWS cognito用户池和一些用户,我正在尝试在我的本机应用程序中为用户获取令牌。但是,一旦我在我的本机应用程序中引用了aws cognito javascript sdk,它就会崩溃。我已成功获得反应应用中的令牌。这是我在react应用程序中的代码。我正在寻找帮助来迁移这段简单的代码以反应原生。



import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {
  AuthenticationDetails,
  CognitoUser,
  CognitoUserPool,
  CognitoUserAttribute
} from 'amazon-cognito-identity-js';

class App extends Component {
  constructor() {
    super();
    this.state = { token: null };
  }

  getToken = function() {
    var authenticationData = {
        Username : 'testuser',
        Password : 'test123',
    };
    var authenticationDetails = new AuthenticationDetails(authenticationData);
    var poolData = {
        UserPoolId : 'ap-southeast-2_412', // Your user pool id here
        ClientId : '123' // Your client id here
    };
    var userPool = new CognitoUserPool(poolData);
    var userData = {
        Username : 'testuser',
        Pool : userPool
    };
    var cognitoUser = new CognitoUser(userData);
    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function (result) {
            let tok = result.getAccessToken().getJwtToken();
            console.log('access token + ' + tok);
            this.setState({ token: tok });
        },
        onFailure: function(err) {
            console.log(err);
        },
        newPasswordRequired: function(userAtt, reqAtt)
        {
          console.log(userAtt);
          console.log(reqAtt);
        }
    });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
          <button onClick={ this.getToken.bind(this) }>Get Token</button>
        <p>
          Token: { this.state.token }
        </p>
      </div>
    );
  }
}

export default App;
&#13;
&#13;
&#13;

感谢。

2 个答案:

答案 0 :(得分:0)

我刚刚写了一篇博文:https://shellmonger.com/2017/05/15/authenticating-react-native-to-aws-cognito-user-pools/ - 它包含了如何执行此操作的示例代码。

答案 1 :(得分:0)

AWS有一个名为AWS Amplify的新库来协助解决此问题:https://github.com/aws/aws-amplify

它包含一个Auth模块,其中包含可以通过npm安装的特定React Native扩展:

npm install aws-amplify-react-native

您需要关联项目:https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development

从那里你可以直接调用API,也可以使用内置的组件包装你的应用程序。