Flutter社交登录插件social_sign_in的使用

Flutter社交登录插件social_sign_in的使用

social_sign_in 是一个帮助你在应用中使用Facebook、Google、Microsoft和Apple进行社交登录的Flutter插件。它利用Firebase来实现这些功能。

开始使用

首先，在你的项目中添加social_sign_in依赖。

dependencies:
    social_sign_in: ^0.0.6

Firebase设置

为了配置Firebase，你需要按照以下步骤操作：

1. 使用Google账户登录到Firebase控制台。
2. 创建一个新的Firebase项目。
3. 在项目中点击身份验证，启用该功能。
4. 在Meta开发者网站、Google控制台、Microsoft Azure和Apple开发者网站上分别创建相应的应用。
5. 导航到登录方法标签页，启用你想要支持的登录提供商。
6. 除了Google登录外，你需要在所支持的社交提供商的控制台网站上配置重定向URL（即当你启用特定社交提供商时生成的URL）。

使用Facebook进行登录

1. 在Meta开发者网站启动应用程序创建过程。
2. 选择一个使用场景，确定应用可用的权限、产品和API。
3. 设置应用名称和邮箱。
4. 指定你刚刚创建的应用的Client ID和Client Secret。

参考：FlutterFire 社交认证文档

使用Google进行登录

1. 在Google控制台创建授权凭据。
2. 指定你刚刚创建的应用的Client ID和Client Secret。

参考：FlutterFire 社交认证文档

使用Microsoft进行登录

1. 登录Azure门户，点击Azure Active Directory，然后在导航面板中点击应用注册以注册一个应用。
2. 输入你的应用名称，并选择**任何组织目录中的帐户和个人Microsoft帐户（例如Skype、Xbox）**以允许从组织和个人帐户登录。
3. 选择Web作为重定向URI，并在Firebase控制台下的身份验证 > 登录方法 > 启用Microsoft提供商中输入重定向URI。
4. 在证书和密钥中添加新的客户端密钥。
5. 指定你刚刚创建的应用的Client ID和Client Secret。

参考：Microsoft身份平台上的应用注册

使用Apple进行登录

1. 在Xcode中构建应用时，它会自动在Apple开发者网站上创建一个应用。如果未自动创建，请手动创建，设置描述和Bundle ID。
2. 添加使用Apple登录功能并在Xcode中重启应用。（Runner (文件浏览器侧边栏) -> 目标 -> Runner -> 签名与能力）
3. 在Apple开发者网站上服务ID中创建一个服务ID并启用使用Apple登录功能（稍后配置）。
4. 在Apple开发者网站上创建一个密钥并启用使用Apple登录服务。
5. 导航到Firebase控制台中的登录方法标签页，启用Apple提供商作为登录提供商。
6. 输入服务ID（步骤3中创建的）、团队ID、密钥ID和私钥（步骤4中下载的密钥，扩展名为.p8）。
7. 为了在Android和Windows设备上使用Apple登录，需要额外配置。

Android

1. 在Firebase云函数中部署一个API来获取重定向URL。
2. 在Apple开发者网站上设置服务ID的重定向URL和域。
3. 修改android/app/src/main/AndroidManifest.xml文件。
4. 部署一个带有Apple登录功能的网页。

Windows

1. 在Firebase云函数中部署一个API来获取重定向URL。
2. 在Firebase托管中部署一个页面以获取主机页面URL。
3. 在Apple开发者网站上设置服务ID的重定向URL、重定向域和主机页面域。

使用

导入social_sign_in.dart库。

import 'package:social_sign_in/social_sign_in.dart';

登录

调用以下示例中的方法。更多详细信息请参阅example文件夹和源代码。

// 单步配置和触发登录
SocialSignIn().initialSite(
  FacebookSignInConfig(
    clientId: [YOUR_FACEBOOK_CLIENT_ID],
    clientSecret: [YOUR_FACEBOOK_CLIENT_SECRET],
    redirectUrl: [YOUR_LOGIN_REDIRECT_URL],
  ), 
  null
);

OutlineButton(
  onPressed: () async {
    final authResult = await SocialSignIn().signInSite(SocialPlatform.facebook, context);
    printSignInResult(authResult);
  }, 
  child: const Text('登录Facebook'),
),

// 分步配置和触发登录
OutlineButton(
  onPressed: () async {
    SocialSignIn()
    .initialSite(
      GoogleSignInConfig(
        clientId: [YOUR_GOOGLE_CLIENT_ID],
        clientSecret: [YOUR_GOOGLE_CLIENT_SECRET],
        redirectUrl: [YOUR_LOGIN_REDIRECT_URL],
      ), 
      null
    )
    .signIn(context)
    .then((authResult) => {
      // 处理登录结果
    });
  },
  child: const Text('登录Google')
),

完整示例

以下是一个完整的示例，展示了如何配置和触发登录。

import 'package:flutter/material.dart';
import 'package:sign_in_button/sign_in_button.dart';
import 'package:social_sign_in/social_sign_in.dart';
import 'package:social_sign_in_example/private_data.dart';

void main() {
  try {
    SocialSignIn().initialSite(
        AppleSignInConfig(
          clientId: SocialPrivateData.appleServiceId,
          redirectUrl: SocialPrivateData.appleRedirectUrl,
          hostUrl: SocialPrivateData.appleHostUrl,
        ),
        null);

    SocialSignIn().initialSite(
        FacebookSignInConfig(
          clientId: SocialPrivateData.facebookClientId,
          clientSecret: SocialPrivateData.facebookClientSecret,
          redirectUrl: SocialPrivateData.simpleRedirectUrl,
        ),
        null);
    SocialSignIn().initialSite(
        GoogleSignInConfig(
          clientId: SocialPrivateData.googleClientId,
          clientSecret: SocialPrivateData.googleClientSecret,
          redirectUrl: SocialPrivateData.simpleRedirectUrl,
        ),
        null);
    SocialSignIn().initialSite(
        MicrosoftSignInConfig(
          clientId: SocialPrivateData.microsoftClientId,
          clientSecret: SocialPrivateData.microsoftClientSecret,
          redirectUrl: SocialPrivateData.simpleRedirectUrl,
        ),
        null);
  } catch (e) {
    debugPrint("initial exception ${e.toString()}");
  }
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  [@override](/user/override)
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  String _result = "None";
  String _detail = "";

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    printSignInResult(SocialSignInResultInterface result) {
      if (result.status != SignInResultStatus.ok) {
        setState(() {
          _detail = result.errorMessage;
          _result = result.status == SignInResultStatus.cancelled
              ? "Cancelled"
              : "Failed";
        });
      } else {
        String tmp = "${result.accessToken} ${result.idToken}";

        if (tmp.length > 20) {
          tmp = "${tmp.substring(0, 17)}...";
        }
        setState(() {
          _detail = "Access Token: $tmp";
          _result = "Success";
        });
      }
    }

    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: _result == "Success" ? Colors.green : Colors.yellow,
            child: Text("Social sign-in: $_result"),
          ),
          Text(_detail),
          SignInButton(
            Buttons.apple,
            onPressed: () async {
              final authResult = await SocialSignIn()
                  .signInSite(SocialPlatform.apple, context);
              printSignInResult(authResult);
            },
          ),
          SignInButton(
            Buttons.google,
            onPressed: () async {
              // final authResult = await SocialSignIn().signInSite(SocialPlatform.google, context);
              SocialSignIn()
                  .initialSite(
                      GoogleSignInConfig(
                        clientId: SocialPrivateData.googleClientId,
                        clientSecret: SocialPrivateData.googleClientSecret,
                        redirectUrl: SocialPrivateData.simpleRedirectUrl,
                      ),
                      null)
                  .signIn(context)
                  .then((value) => {printSignInResult(value)});
            },
          ),
          SignInButton(
            Buttons.facebook,
            onPressed: () async {
              // Trigger the sign-in flow
              final authResult = await SocialSignIn()
                  .signInSite(SocialPlatform.facebook, context);
              printSignInResult(authResult);
            },
          ),
          SignInButton(
            Buttons.microsoft,
            onPressed: () async {
              // Trigger the sign-in flow
              final authResult = await SocialSignIn()
                  .signInSite(SocialPlatform.microsoft, context);
              printSignInResult(authResult);
            },
          ),
        ],
      ),
    ));
  }
}