当我们的网站使用Azure B2C时，如何处理应用程序的电子邮件/密码、Facebook和Google身份验证？

Question

我们在 ASP.NET 网站上使用 Azure B2C 来验证我们的 Web 用户。

我们正在 Flutter 中构建应用程序，需要相同的用户凭据才能在应用程序和网站上工作。

我在尝试在应用程序内实现 Azure B2C 登录网页、尝试各种 WebView 包和 flutter_custom_tabs 包时碰壁了。

Google 和 Facebook 不允许使用 Webview 进行第 3 方身份验证（虽然用户代理可以被黑客攻击，但这似乎不是一个好方法）。

Chrome 自定义选项卡会阻止重定向回应用程序的 URI 方案。 (msauth://)，解决这个问题的唯一方法是构建一个自定义页面，其中包含一个链接，用户可以单击该链接来重定向它们，这是一个可怕的用户体验。

据我了解，最好采用本机方法，在应用程序 UI 内构建电子邮件/密码登录表单，并针对 Google/Facebook 身份验证使用本机 flutter 包。

我走在正确的轨道上还是最好的方法是什么？

Answer 1

我最终成功解决了这个问题。 我唯一可以与 Chrome 自定义选项卡正常工作、可以处理返回到我的应用程序的重定向的包是 Flutter AppAuth 插件。

调试 Android 清单

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.your.app">
<!-- The INTERNET permission is required for development. Specifically,
     the Flutter tool needs it to communicate with the running application
     to allow setting breakpoints, to provide hot reload, etc.
-->
<uses-permission android:name="android.permission.INTERNET"/>

<!-- Add a reference to a configuration for a self-signed-certificate from your website localhost -->
<application android:networkSecurityConfig="@xml/network_security_config">-->
</application>

Android 清单

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    package="com.your.app">
   <application
        android:label="your_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

build.gradle 中的defaultConfig 部分

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.simplydating.app"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        minSdkVersion 19
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName                        
        manifestPlaceholders += ['appAuthRedirectScheme': 'yourscheme']
    }    

注意：将“yourscheme”替换为您的应用重定向 uri 方案协议。 因此，如果它是 yourscheme://1234，只需将“yourscheme”放入配置中即可。

network_security_config（由调试 Android 清单引用） 这指向 app->src->main->res->raw 文件夹中的 localhost.pem 证书，从模拟器进行 https 调用时需要该证书。 要生成 localhost.pem 证书，请使用 mkcert

将这些域添加到证书中

• “本地主机”

• “127.0.0.1”

• “10.0.2.2”（托管模拟器的主机的 IP）

  本地主机 --> 10.0.2.2 -->

注 2：我最终不需要使用 flutter app_auth 插件设置 Android 主机和重定向 uri 哈希等 B2C 推荐配置。

我希望这对某人有帮助，我用头撞了很多砖墙才弄清楚这一切。祝你好运。