react-native - 如何通过 react-native 在 webview 中使用 Cognito Auth 服务

Question

我正在为登录到我的应用程序的用户使用 Cognito 和社交连接（Facebook、Google 和 signInWithApple）。它工作正常，但用户被带到浏览器登录。

我的应用在 IOS 应用商店被拒绝，并显示以下消息：

Guideline 4.0 - Design

We noticed that the user is taken to Safari to sign in with Google, which provides a poor user experience.

Next Steps

To resolve this issue, please revise your app to enable users to sign in or register for an >account in the app.

We recommend implementing the Safari View Controller API to display web content within your >app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL
certificate to confirm they are entering their sign in credentials into a legitimate page.

Resources

For additional information on the Safari View Controller API, please review the What's New in Safari webpage.

我们试图解决这个问题，但我们的 webview 需要一个 URL。我与 Cognito 的连接方法由 Amplify 上的此文档定义：Auth method federate Sign in。

所以我的代码以前看起来像这样：

import Auth from '@aws-amplify/auth';
 [...]

const SignInForm = ({ styles, navigation,  }) => {
 [...]
    <TouchableOpacity
      style={{
        backgroundColor: '#4286F3',
        borderWidth: 1,
        borderColor: '#4286F3',
        padding: 4,
        height: 40,
        margin: 8,
        width: '84%',
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
      }}
      onPress={() => Auth.federatedSignIn({provider: 'Google'})}>
      <Icon
        size={28}
        color='white'
        name={'logo-google'}
        style={{ marginHorizontal: 8 }}
      />
      <Typography color="black" align="center" size="label">
        {'Se connecter via Google'}
      </Typography>
    </TouchableOpacity>

我想在我的应用程序中使用 webview 或以模式显示 webview。但是，问题仍然存在，Cognito 没有为我们提供 URL，只是一个函数。我们如何解决这个问题？

我们有一个如下所示的浏览器组件：

import React from 'react';
import {WebView} from 'react-native-webview';
import PropTypes from 'prop-types';

const Browser = ({route}) => {

  const url = ''
  return <WebView source={{uri: url}} />;
};

Browser.propTypes = {
  route: PropTypes.shape().isRequired,
};
export default Browser;

如果我们找到 URL，我们可能会在模态或 web 视图中使用它

  navigation.navigate('Browser'); 

在onPress.

我不知道问题是来自 Cognito 还是来自我们的代码。

标签： react-nativewebviewoauth-2.0app-storeamazon-cognito