Flutter苹果账号登录插件sign_in_with_apple_js的使用

Flutter苹果账号登录插件sign_in_with_apple_js的使用

sign_in_with_apple_js

sign_in_with_apple_js 是一个 Dart 包装器，用于 Apple 的 Sign in with Apple JS 框架。它还包含了一些助手函数来抽象 JavaScript 调用。

Setup

根据 Apple 文档：

  1. 在你的网页中包含脚本标签和 Apple 主机版本的 Sign in with Apple JS 框架链接：
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
  1. 使用仅通过 HTML 标签配置授权对象，设置头部部分的元标签并显示一个“Apple 登录”按钮，如下例所示：
<head>
    <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
    <meta name="appleid-signin-scope" content="[SCOPES]">
    <meta name="appleid-signin-redirect-uri"content="[REDIRECT_URI]">
    <meta name="appleid-signin-state"content="[STATE]">
    <meta name="appleid-signin-nonce"content="[NONCE]">
    &lt;meta name="appleid-signin-use-popup"content="true"&gt; <!-- 或 false，默认为 false -->
&lt;/head&gt;

Initialization

可以跳过上述步骤，在 HTML <head> 部分设置这些元标签（见上）。

  1. 导入包：
import 'package:apple_sign_in_js/sign_in_with_apple_js.dart';
  1. 调用 init 方法传入必要的选项：
initSignInWithApple(ClientConfigI(
  clientId: [CLIENT_ID], // 必需 (Apple ServiceID)
  redirectURI: [REDIRECT_URI], // 必需
  scope: [SCOPES], // 空格分隔的列表 (例如 "name email")
  state: [STATE],
  nonce: [NONCE]
  usePopup: [USE_POPUP], // 默认为 false
));

Handling the Authorization Response

处理授权响应

  1. 导入交互库以访问 AppleID.auth：
import 'package:sign_in_with_apple_js/sign_in_with_apple_js.dart';
  1. 异步调用 signInWithApple()：
SignInResponseI response = await signInWithApple();
  1. 使用 SignInResponseI 中的 id-token 或 authorization-code 创建服务器会话。
// 使用返回的 id-token 或 authorization-code 创建会话

Listening to Events

监听事件

  1. 导入包：
import 'package:sign_in_with_apple_js/sign_in_with_apple_js.dart';
  1. 添加成功和失败事件的回调：
/// on `AppleIDSignInOnSuccess`
final streamSub = listenAppleIDSignInOnSuccess((event) =&gt; print("Success."));

/// on `AppleIDSignInOnFailure`
final streamSub = listenAppleIDSignInOnFailure((event) =&gt; print("Failure."));

Using the Javascript Wrapper Directly

直接使用 JavaScript 包裹

如果只需要在页面上访问 Sign in with Apple JS，可以直接导入包裹：

import 'package:sign_in_with_apple_js/apple_id_auth_js.dart';

示例代码

import 'package:sign_in_with_apple_js/apple_id_auth_js.dart';
import 'package:sign_in_with_apple_js/sign_in_with_apple_js.dart';

void main() {
  /// 初始化
  initSignInWithApple(ClientConfigI(
    clientId: '', // TODO:
    scope: 'name email',
    redirectURI: '', // TODO:
    usePopup: true,
  ));
}

更多关于Flutter苹果账号登录插件sign_in_with_apple_js的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter苹果账号登录插件sign_in_with_apple_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用sign_in_with_apple_js插件来实现Apple账号登录的示例代码。这个插件通过JavaScript桥接来实现Apple的Sign In with Apple功能，因为原生的Flutter插件在某些平台上可能受到一些限制。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加sign_in_with_apple_js依赖：

dependencies:
  flutter:
    sdk: flutter
  sign_in_with_apple_js: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Web支持

由于这个插件依赖于JavaScript，你需要确保你的Flutter项目已经配置了Web支持。如果还没有配置，可以通过以下命令添加：

flutter config --enable-web

3. 初始化插件

在你的Flutter项目的入口文件（通常是main.dart）中，初始化SignInWithAppleJs插件：

import 'package:flutter/material.dart';
import 'package:sign_in_with_apple_js/sign_in_with_apple_js.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sign In with Apple Example'),
        ),
        body: SignInWithAppleScreen(),
      ),
    );
  }
}

class SignInWithAppleScreen extends StatefulWidget {
  @override
  _SignInWithAppleScreenState createState() => _SignInWithAppleScreenState();
}

class _SignInWithAppleScreenState extends State<SignInWithAppleScreen> {
  late SignInWithAppleJs _signInWithAppleJs;

  @override
  void initState() {
    super.initState();
    _signInWithAppleJs = SignInWithAppleJs();
  }

  void _performSignIn() async {
    try {
      var userCredential = await _signInWithAppleJs.signIn();
      print('User Credential: $userCredential');
      // 在这里处理登录后的用户凭证
    } catch (e) {
      print('Error: $e');
      // 处理错误
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _performSignIn,
        child: Text('Sign In with Apple'),
      ),
    );
  }
}

4. 配置iOS（可选）

如果你同时需要在iOS平台上使用Sign In with Apple，虽然sign_in_with_apple_js主要用于Web，但你也可以使用原生的Flutter插件如sign_in_with_apple。不过，这里我们主要关注Web实现。

5. 运行项目

确保你的Flutter项目已经正确配置了Web支持，然后运行以下命令来启动Web应用：

flutter run -d web-server --web-port=8080

或者，如果你使用的是VS Code或Android Studio，可以直接从IDE中选择运行Web应用。

注意事项

  • 确保你的Apple开发者账号已经配置了Sign In with Apple功能。
  • 由于这是一个基于JavaScript的桥接插件，性能可能不如原生插件，但在Web平台上是一个可行的解决方案。
  • 在实际生产环境中，你需要处理用户凭证的存储和验证，确保安全性。

这样，你就可以在Flutter Web应用中集成并使用Sign In with Apple功能了。

回到顶部