如何在 Flutter 中使用 Firebase_Auth 登录 Twitter

Question

如何使用 firebase_auth 和 Flutter 编写 Sign In with Twitter 功能？

我看到了一些使用 flutter_twitter_login or flutter_twitter, however they use a now Deprecated API and folks complain about Apple Store Rejection 的示例。

Firebase Auth 提供了 TwitterAuthProvider，但以下代码仍然不完整：

final AuthCredential credential = TwitterAuthProvider.getCredential(
  authToken: twitterAccessToken,
  authTokenSecret: twitterAccessTokenSecret,
);
final AuthResult result = await auth.signInWithCredential(credential);

Answer 1

他们在主页本身共享了一个通用示例，只有 'sign in provider' 发生了变化，其余的都一样（google、fb 和 twitter）。结果有一个用户属性将 return 用户详细信息，检查下面的代码

final AuthCredential credential = TwitterAuthProvider.getCredential(
  authToken: twitterAccessToken,
  authTokenSecret: twitterAccessTokenSecret,
);
final AuthResult result = await auth.signInWithCredential(credential);
final FirebaseUser user = result.user;
print("signed in " + user.displayName);

Answer 2

要使用 Twitter 登录，请执行以下操作：

 Future<FirebaseUser> loginWithTwitter() async {
  var twitterLogin = new TwitterLogin(
    consumerKey: 'key',
    consumerSecret: 'secretkey',
  );

  final TwitterLoginResult result = await twitterLogin.authorize();

switch (result.status) {
  case TwitterLoginStatus.loggedIn:
    var session=result.session;
    final AuthCredential credential= TwitterAuthProvider.getCredential(
      authToken: session.token,
      authTokenSecret: session.secret
    );
    FirebaseUser firebaseUser=(await firebaseAuth.signInWithCredential(credential)).user;
    print("twitter sign in"+firebaseUser.toString());
    break;
  case TwitterLoginStatus.cancelledByUser:
    break;
  case TwitterLoginStatus.error:
    break;
}

使用twitterlogin并传递consumer key和consumer secret key，然后使用方法getCredential()和signInWithCredential登录。

Answer 3

我使用 3 个资源解决了这个问题：

Flutter Facebook Sign In (with Firebase) in 2020篇
Log in with Twitter 指南
Dart OAuth1 图书馆

最终，我能够完全删除 flutter_twitter 包，但仍然支持 使用 Twitter 登录。

与 Facebook 解决方案中概述的 CustomWebView 类似，我创建了一个 TwitterLoginScreen 如：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:oauth1/oauth1.dart';

/// Twitter Login Screen.
/// See [Log in with Twitter](https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter).
class TwitterLoginScreen extends StatefulWidget {
  final twitterPlatform = Platform(
    'https://api.twitter.com/oauth/request_token', // temporary credentials request
    'https://api.twitter.com/oauth/authorize', // resource owner authorization
    'https://api.twitter.com/oauth/access_token', // token credentials request
    SignatureMethods.hmacSha1, // signature method
  );

  final ClientCredentials clientCredentials;
  final String oauthCallbackHandler;

  TwitterLoginScreen({
    @required final String consumerKey,
    @required final String consumerSecret,
    @required this.oauthCallbackHandler,
  }) : clientCredentials = ClientCredentials(consumerKey, consumerSecret);

  @override
  _TwitterLoginScreenState createState() => _TwitterLoginScreenState();
}

class _TwitterLoginScreenState extends State<TwitterLoginScreen> {
  final flutterWebviewPlugin = FlutterWebviewPlugin();

  Authorization _oauth;

  @override
  void initState() {
    super.initState();

    // Initialize Twitter OAuth
    _oauth = Authorization(widget.clientCredentials, widget.twitterPlatform);

    flutterWebviewPlugin.onUrlChanged.listen((url) {
      // Look for Step 2 callback so that we can move to Step 3.
      if (url.startsWith(widget.oauthCallbackHandler)) {
        final queryParameters = Uri.parse(url).queryParameters;
        final oauthToken = queryParameters['oauth_token'];
        final oauthVerifier = queryParameters['oauth_verifier'];
        if (null != oauthToken && null != oauthVerifier) {
          _twitterLogInFinish(oauthToken, oauthVerifier);
        }
      }
    });

    _twitterLogInStart();
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  Future<void> _twitterLogInStart() async {
    assert(null != _oauth);
    // Step 1 - Request Token
    final requestTokenResponse =
        await _oauth.requestTemporaryCredentials(widget.oauthCallbackHandler);
    // Step 2 - Redirect to Authorization Page
    final authorizationPage = _oauth.getResourceOwnerAuthorizationURI(
        requestTokenResponse.credentials.token);
    flutterWebviewPlugin.launch(authorizationPage);
  }

  Future<void> _twitterLogInFinish(
      String oauthToken, String oauthVerifier) async {
    // Step 3 - Request Access Token
    final tokenCredentialsResponse = await _oauth.requestTokenCredentials(
        Credentials(oauthToken, ''), oauthVerifier);

    final result = TwitterAuthProvider.getCredential(
      authToken: tokenCredentialsResponse.credentials.token,
      authTokenSecret: tokenCredentialsResponse.credentials.tokenSecret,
    );

    Navigator.pop(context, result);
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(title: Text("Twitter Login")),
      url: "https://twitter.com",
    );
  }
}

然后，此屏幕的 AuthCredential 结果可以传递给 FirebaseAuth.signInWithCredential。

Answer 4

这对我有用。（引用自https://firebase.flutter.dev/docs/auth/social#twitter）

import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(twitterAuthCredential);
}

这最初对我不起作用。

为了使其正常工作，我必须更改的内容。

在 Twitter 开发者门户中请求提升权限。
创建自定义方案（回调 URL）并相应地配置 ios/android 文件。如 (https://pub.dev/packages/twitter_login).
还在 Twitter 开发门户中配置此回调 URL。

如何在 Flutter 中使用 Firebase_Auth 登录 Twitter

How to Sign In with Twitter using Firebase_Auth with Flutter

firebase

flutter

dart

firebase-authentication

twitter-oauth