Flutter登录功能之Twitter登录

远端配置

注册账号

https://developer.twitter.com/en/portal/dashboard

创建应用

注册成功后在主页按照提示创建一个应用。

申请Twitter数据和API权限，需要填写一段不少于250字符的当前业务场景使用说明。

使用场景示例如下：

Integrating Twitter for app login enhances user experience by allowing quick access and secure authentication. Users can log in effortlessly using their Twitter credentials, streamlining the onboarding process and ensuring data privacy compliance.
Our app leverages Twitter login for seamless user access, ensuring robust security and data protection, while adhering to Twitter's API use policies.

配置应用

点击创建的APP，选择用户授权设置。

填写如下信息。

• Type of APP中选择Native App即可。
• App info中Callback/Redirect URI可以填写自定义的scheme名称，比如在andoird可以设置android-login-twitter://，在iOS设置ios-login-twitter://，用于调用Twitter登录成功后，跳转到当前app中，暂时先不填或者随便填一个，后续正式填写的时候把随便填的删除。
• Website URL需要填写产品的介绍网站，先简单填一个，也可以进行登录测试。

在提交的时候会展示出Auth2.0的Client ID和Client Secret，需要保存好，只展示一次，若丢失，需要重新生成。

再点击项目的Keys and tokens，选择生成Comsumer Keys，会生成ID和Secret，复制保存好。

Firebase配置

将上一步骤中生成的Comsumer id和secret填写到Firebase中的Twitter登陆配置，并将如下的回调URL添加到Twitter开发者平台中User authentication settings的回调地址。

iOS配置

将firebase平台中iOS的编码应用ID复制到info.plist文件的CFBundleURLSchemes的下面。

示例如下：

<key>CFBundleURLSchemes</key>
<array>
    ...
    <!-- Twitter Sign-in Section -->
    <string>app-1-xxx</string>
    ...
</array>

常见问题

（1）Callback URL not approved for this client application错误

在Tiwtter回调URL添加一个如下地址。

twittersdk://

Flutter项目开发配置

引用插件

插件的地址如下： https://pub.dev/packages/twitter_login

pubspec.yaml中依赖配置如下：

twitter_login: ^4.4.2

添加登录按钮

添加Twitter登录按钮。

TwitterAuthButton(onPressed: () async {
  if (await signInWithTwitter()) {
    await gotoHomePage(context);
  }
}),

执行登陆操作

此处使用Firebase登陆Twitter，插件的原生登陆会在登陆成功后一直跳转不回来app。

// Twitter Firebase 登录
Future<bool> signInWithTwitter() async {
  return signInWithFirebase(TwitterAuthProvider());
}

// 退出 Twitter Firebase 登录
Future<void> signOutFromTwitter() async {
  await signOutFromFirebase();
}