Flutter社交登录插件flutter_all_social_login的使用

Flutter社交登录插件flutter_all_social_login的使用

特性

  • 在一个包中实现所有社交登录功能。
  • 支持iOS和Android平台。
  • 减少代码行数和包安装。

开始使用

在编写代码之前：

  • 需要创建Firebase项目并插入google.json文件到你的项目，并启用身份验证。
  • 需要配置你正在使用的平台。
  • 导入firebase_auth包以访问用户类。

社交登录

Google登录

import 'package:flutter_all_social_login/flutter_all_social_login.dart';

void googleLogin() {
  SocialLoginUtils().signInWithGoogle(context,isDisplayProgressBar: true,).then((userData) {
    // 返回类型是User ('package:firebase_auth/firebase_auth.dart')
    if(userData!=null){
      Navigator.of(context)
          .push(PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
        transitionDuration: Duration(seconds: 0),
      ));
    }
  });
}

Apple登录

如果平台是Android，必须传递clientID参数。

void appleLogin() {
  SocialLoginUtils().appleLogin(context,Platform.isAndroid,isDisplayProgressBar: true,
      clientID: "as_given_doc"
  ).then((userData) {
    // 返回类型是User ('package:firebase_auth/firebase_auth.dart')
    if(userData!=null){
      Navigator.of(context)
          .push(PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
        transitionDuration: Duration(seconds: 0),
      ));
    }
  });
}

Facebook登录

void facebookLogin() {
  SocialLoginUtils().signInWithFacebook(context,isDisplayProgressBar: true,).then((userData) {
    // 返回类型是User ('package:firebase_auth/firebase_auth.dart')
    if(userData!=null){
      Navigator.of(context)
          .push(PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
        transitionDuration: Duration(seconds: 0),
      ));
    }
  });
}

LinkedIn登录

为了登出时设置destroySession为false。

void linkedInLogin() {
  SocialLoginUtils().signInWithLinkedIn(context,isDisplayProgressBar: true,
      clientId:'CLIENT_ID' ,clientSecret:'CLIENT_SECRET' ,redirectUrl: 'REDIRECT_URL',
      appBar:AppBar(title: Text("All Social login"),),
      destroySession: false
  ).then((userData) {
    // 返回类型是MAP<String, dynamic>
    if(userData!=null){
      Navigator.of(context)
          .push(PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) => DashboardPage(mapUserData:userData),
        transitionDuration: Duration(seconds: 0),
      ));
    }
  });
}

其他信息

编写此包的主要目的是减少代码行数。一旦完成登录，你需要执行登出操作。

完整示例Demo

import 'package:flutter/material.dart';
import 'package:flutter_all_social_login/flutter_all_social_login.dart';
import 'DashboardPage.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'dart:io' show Platform;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    initializeApp();
    super.initState();
  }

  Future initializeApp() async{
    await Firebase.initializeApp();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
                onTap: () {
                  SocialLoginUtils().signInWithGoogle(context,isDisplayProgressBar: true,).then((userData) {
                    print("user button =="+userData.toString());
                    if(userData!=null){
                      Navigator.of(context)
                          .push(PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation<double> animation,
                            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
                        transitionDuration: Duration(seconds: 0),
                      ));
                    }
                  });
                },
                child:Container(
                  height: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.all(10),
                  child:const Text("Google Login"),
                )),
            GestureDetector(
                onTap: () {
                  SocialLoginUtils().signInWithFacebook(context,isDisplayProgressBar: true,).then((userData) {
                    print("user button =="+userData.toString());
                    if(userData!=null){
                      Navigator.of(context)
                          .push(PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation<double> animation,
                            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
                        transitionDuration: Duration(seconds: 0),
                      ));
                    }
                  });
                },
                child:Container(
                  height: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.all(10),
                  child:const Text("Facebook Login"),
                )),
            GestureDetector(
                onTap: () {
                  SocialLoginUtils().signInWithLinkedIn(context,isDisplayProgressBar: true,
                  clientId:'clientId' ,clientSecret:'clientSecret' ,redirectUrl: 'http://localhost:8081/linkedin/callback',
                      appBar:AppBar(title: Text("All Social login"),),
                    destroySession: true
                  ).then((userData) {
                    print("user button =="+userData.toString());
                    if(userData!=null){
                      Navigator.of(context)
                          .push(PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation<double> animation,
                            Animation<double> secondaryAnimation) => DashboardPage(mapUserData:userData),
                        transitionDuration: Duration(seconds: 0),
                      ));
                    }
                  });
                },
                child:Container(
                  height: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.all(10),
                  child:const Text("Linked in Login"),
                )),
            GestureDetector(
                onTap: () {
                  SocialLoginUtils().appleLogin(context,Platform.isAndroid,isDisplayProgressBar: true,
                    clientID: "AS_PER_THE_DOCS"
                  ).then((userData) {
                    print("user button =="+userData.toString());
                    if(userData!=null){
                      Navigator.of(context)
                          .push(PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation<double> animation,
                            Animation<double> secondaryAnimation) => DashboardPage(userData:userData),
                        transitionDuration: Duration(seconds: 0),
                      ));
                    }
                  });
                },
                child:Container(
                  height: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(10),
                  margin: const EdgeInsets.all(10),
                  child:const Text("Apple Login"),
                )),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用flutter_all_social_login插件来实现社交登录的示例代码。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_all_social_login依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_all_social_login: ^最新版本号  # 请替换为最新版本号

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

2. 配置Android项目

对于Android平台，你需要在android/app/src/main/AndroidManifest.xml文件中添加必要的权限和配置。例如，如果你打算使用Google登录，你需要添加以下内容：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

    <application
        android:label="yourapp"
        android:icon="@mipmap/ic_launcher">
        <!-- 其他配置 -->

        <!-- Google Sign-In -->
        <meta-data
            android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id"/>
        <activity
            android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
            android:excludeFromRecents="true"
            android:exported="true"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
        <activity
            android:name="com.google.android.gms.auth.api.signin.internal.SignInConfirmationActivity"
            android:excludeFromRecents="true"
            android:exported="true"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
    </application>

</manifest>

你还需要在android/app/src/main/res/values/strings.xml文件中添加你的Google客户端ID：

<resources>
    <string name="default_web_client_id">你的Google客户端ID</string>
    <!-- 其他字符串 -->
</resources>

3. 配置iOS项目

对于iOS平台，你需要按照插件的文档配置Info.plist和其他必要的设置。这通常涉及到添加URL Scheme和设置权限。

4. 使用插件进行社交登录

以下是一个简单的示例，展示了如何使用flutter_all_social_login插件进行Google登录：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Social Login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SocialLoginScreen(),
    );
  }
}

class SocialLoginScreen extends StatefulWidget {
  @override
  _SocialLoginScreenState createState() => _SocialLoginScreenState();
}

class _SocialLoginScreenState extends State<SocialLoginScreen> {
  final FlutterAllSocialLogin _flutterAllSocialLogin = FlutterAllSocialLogin();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Login Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              // 使用Google登录
              SocialUser user = await _flutterAllSocialLogin.signInWithGoogle();
              print('Google User: ${user.toJson()}');
            } catch (e) {
              print('Error during Google login: $e');
            }
          },
          child: Text('Login with Google'),
        ),
      ),
    );
  }
}

5. 处理登录结果

SocialUser对象包含了用户的基本信息，你可以根据需要进行处理。例如，你可以将用户信息保存到数据库或发送到服务器进行进一步处理。

注意事项

  • 确保你已经按照每个社交平台的要求配置了必要的API密钥和回调URL。
  • 仔细阅读flutter_all_social_login插件的文档，了解所有可用的登录选项和配置。
  • 在生产环境中使用时，务必处理好异常和错误情况，以提供良好的用户体验。

这个示例展示了如何使用flutter_all_social_login插件进行Google登录。对于其他社交平台（如Facebook、Twitter等），你可以参考插件的文档进行类似的配置和调用。

回到顶部