【原创 附源码】Flutter安卓及iOS海外登录--Apple登录最详细流程

最近接触了几个海外登录的平台,踩了很多坑,也总结了很多东西,决定记录下来给路过的兄弟坐个参考,也留着以后留着回顾。更新时间为2024年2月12日,后续集成方式可能会有变动,所以目前的集成流程仅供参考,但是绝对详细且经过真机验证。

整个记录会包含源码。

dart环境:sdk: '>=2.7.0 <3.0.0'

集成海外登录需要科学上网,一共涉及四个平台,Tiktok,Facebook,Google以及Apple登录。我会分别一一整理记录,所以我的项目就命名为fgta_login (Facebook,Google,Tiktok,Apple登录),奇怪的命名+1。

这篇文章只记录Apple账户登录的详细流程,其他几个平台的集成流程如下:

【原创 附源码】Flutter安卓及iOS海外登录--Google登录最详细流程

【原创 附源码】Flutter安卓及iOS海外登录--Tiktok登录最详细流程

【原创 附源码】Flutter安卓及iOS海外登录--Facebook登录最详细流程

【原创 附源码】Flutter集成Apple支付详细流程(附源码)

 【原创 附源码】Flutter集成谷歌支付详细流程(附源码)​​​​​​​

一 Xcode项目配置

Apple登录可谓是海外第三方登录里最简单,最容易实现的一个了,打开iOS项目,点击添加Capability:

然后选择苹果登录,(如果这里没有的话需要去苹果开发者中心,在bundle id的配置里增加 Sign in with Apple的功能,记住账户必须是公司账户才有该选项) :

增加完如下所示:

ios项目就配置完了

二 Flutter 项目配置

苹果登录使用的第三方插件是

sign_in_with_apple: ^4.0.0 

插件地址为:sign_in_with_apple | Flutter package

在ymal文件增加插件,然后执行flutter pub get 

执行完了记得去ios项目里执行pod install同步第三方插件。

然后开始调用apple登录:

 final credential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );
    if (credential != null) {
      print("苹果登录信息");
      print(credential.toString());
      print(credential.email);
      print(credential.givenName);
      print(credential.userIdentifier);
    }

调用结果如下:

授权完成后,输出用户信息为

但是注意,这里有一个坑点,苹果用户只有第一次授权登录的时候才可以获取到用户的姓名、邮箱这些信息,在第二次登录的时候,这些信息会返回空值,只会返回用户的identfier,第二次多冷结果如下:

可以发现,用户的邮箱和姓名都返回为空了

源码地址:

源码地址:https://github.com/TheRuningAnt/FGTALogin.git 

注:这个项目使用的是个人账户,所以未开启apple sign登录功能,但是登录的逻辑和代码是有的且经过完整的测试,兄弟们下载完成之后将bundle id改为自己的,然后在这里增加上苹果登录的授权就可以了,如何增加上文有介绍

要在Flutter中调用Android原生方法,可以使用Flutter插件。Flutter插件是一个将Flutter应用程序与原生平台通信的桥梁。下面是一些步骤来创建一个Flutter插件并在其中调用Android原生方法: 1. 使用Flutter插件模板创建一个Flutter插件: ``` flutter create --template=plugin <plugin-name> ``` 2. 在Flutter插件项目的`android`目录下,打开`build.gradle`文件,并添加以下代码: ``` dependencies { implementation 'io.flutter:flutter_embedding_v2.7.0' // 其他依赖项 } ``` 3. 在Flutter插件项目的`android/src/main`目录下,创建一个`java`包,并在其中创建一个类,该类将包含您要调用的Android原生方法。例如,您可以创建一个名为`MyPlugin`的类,并在其中添加以下代码: ``` package com.example.my_plugin; import android.content.Context; import android.widget.Toast; import io.flutter.embedding.engine.plugins.FlutterPlugin; public class MyPlugin implements FlutterPlugin { private Context context; @Override public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) { context = flutterPluginBinding.getApplicationContext(); } @Override public void onDetachedFromEngine(FlutterPluginBinding flutterPluginBinding) { context = null; } public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } } ``` 4. 在Flutter插件项目的`lib`目录下,创建一个文件夹,并在其中创建一个`dart`文件,该文件将包含您要在Flutter中调用的方法。例如,您可以创建一个名为`my_plugin.dart`的文件,并在其中添加以下代码: ``` import 'package:flutter/services.dart'; class MyPlugin { static const MethodChannel _channel = const MethodChannel('my_plugin'); static Future<void> showToast(String message) async { try { await _channel.invokeMethod('showToast', {'message': message}); } on PlatformException catch (e) { print(e.message); } } } ``` 5. 在Flutter插件项目的`android/src/main`目录下,创建一个`res`目录,并在其中创建一个`values`目录。在`values`目录中,创建一个`strings.xml`文件,并添加以下代码: ``` <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">My Plugin</string> </resources> ``` 6. 在Flutter插件项目的`android/src/main`目录下,打开`AndroidManifest.xml`文件,并添加以下代码: ``` <application android:name="io.flutter.app.FlutterApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher"> <activity android:name="io.flutter.embedding.android.FlutterActivity" android:exported="true" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> ``` 7. 在Flutter插件项目的`android/src/main`目录下,打开`MyPlugin.java`文件,并添加以下代码: ``` package com.example.my_plugin; import android.content.Context; import android.widget.Toast; import io.flutter.embedding.engine.plugins.FlutterPlugin; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.PluginRegistry.Registrar; public class MyPlugin implements FlutterPlugin { private Context context; private MethodChannel channel; public static void registerWith(Registrar registrar) { final MethodChannel channel = new MethodChannel(registrar.messenger(), "my_plugin"); channel.setMethodCallHandler(new MyPlugin(registrar.context(), channel)); } private MyPlugin(Context context, MethodChannel channel) { this.context = context; this.channel = channel; } @Override public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) { context = flutterPluginBinding.getApplicationContext(); channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), "my_plugin"); channel.setMethodCallHandler(new MyPlugin(context, channel)); } @Override public void onDetachedFromEngine(FlutterPluginBinding flutterPluginBinding) { context = null; channel.setMethodCallHandler(null); channel = null; } public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } private void onMethodCall(MethodCall call, MethodChannel.Result result) { if (call.method.equals("showToast")) { String message = call.argument("message"); showToast(message); result.success(null); } else { result.notImplemented(); } } } ``` 8. 在Flutter应用程序中,导入您的Flutter插件,并使用以下代码调用Android原生方法: ``` import 'package:flutter/material.dart'; import 'package:my_plugin/my_plugin.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () { MyPlugin.showToast('Hello World!'); }, child: Text('Show Toast'), ), ), ), ); } } ``` 这样,您就可以在Flutter应用程序中调用Android原生方法了!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值