Flutter Web 身份验证

一个用于通过 Web 服务对用户进行身份验证的 Flutter 插件，即使 Web 服务由第三方运行。最常用于 OAuth2，但也可用于任何可以重定向到自定义方案的 Web 流程。

在后台，此插件在 iOS 12+ 和 macOS 10.15+ 上使用 ASWebAuthenticationSession，在 iOS 11 上使用 SFAuthenticationSession，在 Android 上使用 Chrome Custom Tabs，并在 Web 上打开一个新窗口。您可以使用 iOS 8+ 进行构建，但目前仅支持 iOS 11 或更高版本。

iOS Android
iOS Android
macOS
macOS

用法

对您自己的自定义站点进行身份验证

import 'package:flutter_web_auth/flutter_web_auth.dart';

// Present the dialog to the user
final result = await FlutterWebAuth.authenticate(url: "https://my-custom-app.com/connect", callbackUrlScheme: "my-custom-app");

// Extract token from resulting url
final token = Uri.parse(result).queryParameters['token']

使用 Google 的 OAuth2 对用户进行身份验证

import 'package:flutter_web_auth/flutter_web_auth.dart';

import 'dart:convert' show jsonDecode;
import 'package:http/http.dart' as http;

// App specific variables
final googleClientId = 'XXXXXXXXXXXX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
final callbackUrlScheme = 'com.googleusercontent.apps.XXXXXXXXXXXX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

// Construct the url
final url = Uri.https('accounts.google.com', '/o/oauth2/v2/auth', {
  'response_type': 'code',
  'client_id': googleClientId,
  'redirect_uri': '$callbackUrlScheme:/',
  'scope': 'email',
});

// Present the dialog to the user
final result = await FlutterWebAuth.authenticate(url: url.toString(), callbackUrlScheme: callbackUrlScheme);

// Extract code from resulting url
final code = Uri.parse(result).queryParameters['code'];

// Use this code to get an access token
final response = await http.post('https://www.googleapis.com/oauth2/v4/token', body: {
  'client_id': googleClientId,
  'redirect_uri': '$callbackUrlScheme:/',
  'grant_type': 'authorization_code',
  'code': code,
});

// Get the access token from the response
final accessToken = jsonDecode(response.body)['access_token'] as String;

设置

设置与其他 Flutter 插件一样，但请注意下方 Android 和 Web 的注意事项。

Android

为了捕获回调 URL，需要在 `AndroidManifest.xml` 中添加以下 `activity`。请务必将 `YOUR_CALLBACK_URL_SCHEME_HERE` 替换为您实际的回调 URL 方案。

<manifest>
  <application>

    <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
      <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
      </intent-filter>
    </activity>

  </application>
</manifest>

Web

在 Web 平台上，需要创建一个捕获回调 URL 并使用 JavaScript `postMessage()` 方法将其发送到应用程序的端点。在项目的 `./web` 文件夹中，创建一个名为 `auth.html`（例如）的 HTML 文件，内容如下：

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please
close the window.
<script>
  window.opener.postMessage({
    'flutter-web-auth': window.location.href
  }, window.location.origin);
  window.close();
</script>

传递给身份验证服务的重定向 URL 必须与应用程序运行的 URL 相同（方案、主机、端口（如果需要）），并且路径必须指向创建的 HTML 文件，在本例中为 `/auth.html`。`authenticate()` 方法的 `callbackUrlScheme` 参数不考虑此设置，因此可以使用代码中的原生平台方案。

对于 Web 消息响应模式下的“使用 Apple 登录”，还将捕获来自 https://appleid.apple.com 的 postMessage，并将授权对象作为 URL 片段返回，该片段被编码为查询字符串（与其他提供商兼容）。

GitHub

查看 Github