AWS Amplify Auth Login 从 React Native 上的 React Native Webview

Posted 2023-02-22

【中文标题】AWS Amplify Auth Login 从 React Native 上的 React Native Webview

【英文标题】：AWS Amplify Auth Login from React Native Webview on React Native

【发布时间】：2020-08-21 22:57:24

【问题描述】：

我正在开发一个在 web 视图中加载 example.com 的 React Native 应用程序。我想知道使用 postMessage 将用户名和密码从 React Native webview 传递给 React Native 是否安全。你觉得没问题还是不安全？

这是向 React Native 发送用户名和密码的网络应用程序（example.com）

这是 React Native <WebView onMessage=m => this._onMessage(m) /> 接收该用户名和密码以验证用户。

似乎它会起作用，但不确定它是否安全。如果没有，有没有办法从 React Native webview 对 React Native 中的用户进行身份验证？

【参考方案1】：

根据MDNpostMessage方法是安全的，但是请参考security concern部分。

您可以发送用户会话而不是 username/password 对。

您的代码如下所示：

// in webb app
const sendSession = async() => 
  const session = await Auth.currentSession()
  const data = 
    idToken: session.getIdToken().getJwtToken(),
    accessToken: session.getAccessToken().getJwtToken(),
    refreshToken: session.getRefreshToken().getToken(),
  
  window.ReactNativeWebView?.postMessage(JSON.stringify(data))


// in mobile app
const _onMessage = (event) => 
  const data = JSON.parse(event.nativeEvent.data)
  const 
    idToken,
    accessToken,
    refreshToken
   = data
  const userPool = new CognitoUserPool(
    UserPoolId: 'UserPoolId',
    ClientId: 'ClientId',
  )
  const cognitoIdToken = new CognitoIdToken(
    IdToken: idToken,
  )
  const cognitoAccessToken = new CognitoAccessToken(
    AccessToken: accessToken,
  )
  const cognitoRefreshToken = new CognitoRefreshToken(
    RefreshToken: refreshToken,
  )
  const username = cognitoIdToken.payload['cognito:username'] // or whatever you need to get from playload as a username
  const user = new CognitoUser(
    Username: username,
    Pool: userPool,
  )
  user.setSignInUserSession(
    new CognitoUserSession(
      AccessToken: cognitoAccessToken,
      IdToken: cognitoIdToken,
      RefreshToken: cognitoRefreshToken,
    ),
  )