Visa

Buy Me A Coffee

这是一个OAuth 2.0包，可以轻松地为Flutter应用添加第三方身份验证。它支持FB、Google、LinkedIn、Discord、Twitch、Github和Spotify身份验证。它还支持添加新的OAuth提供商。您可以阅读这篇Medium文章以获得简要介绍。

演示

demo

参考

入门

安装Visa

  • 打开您的pubspec.yaml文件，并在dependencies下添加visa:。
  • 在终端中：运行flutter pub get。
  • 在Dart代码中添加相关的导入语句。

// Possible imports:
import 'package:visa/fb.dart';
import 'package:visa/google.dart';
import 'package:visa/github.dart';
import 'package:visa/linkedin.dart';
import 'package:visa/discord.dart';
import 'package:visa/twitch.dart';
import 'package:visa/spotify.dart';
import 'package:visa/auth-data.dart';
import 'package:visa/engine/oauth.dart';
import 'package:visa/engine/simple-auth.dart';
import 'package:visa/engine/visa.dart';

基本用法

第一步 – 获取提供商。

目前有7个默认的OAuth提供商。

  FacebookAuth()
  GoogleAuth({ String personFields })
  TwitchAuth()
  DiscordAuth()
  GithubAuth()
  LinkedInAuth()
  SpotifyAuth()

创建一个新实例

FacebookAuth fbAuth = FacebookAuth();
SimpleAuth visa = fbAuth.visa;

第二步 – 身份验证。

如上所示，每个提供商都包含一个名为visa的SimpleAuth实例。
SimpleAuth类只有一个公共函数：authenticate()。它接收
所有必要的OAuth凭据，并返回一个已配置
用于身份验证的WebView。

SimpleAuth.authenticate({ params })

WebView authenticate({
  bool newSession=false // If true, user has to reenter username and password even if they've logged in before
  String clientSecret, // Some providers (GitHub for instance) require the OAuth client secret (from developer portal).
  @required String clientID, // OAuth client ID (from developer portal)
  @required String redirectUri, // OAuth redirect url (from developer portal) 
  @required String state, // OAuth state string can be whatever you want.
  @required String scope, // OAuth scope (Check provider's API docs for allowed scopes)
  @required Function onDone, // Callback function which expects an AuthData object.
});

以下是使用此函数的方法。

import 'package:visa/auth-data.dart';
import 'package:visa/fb.dart';

class AuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// Simply Provide all the necessary credentials
      body: FacebookAuth().visa.authenticate(
          clientID: '139732240983759',
          redirectUri: 'https://www.e-oj.com/oauth',
          scope: 'public_profile,email',
          state: 'fbAuth',
          onDone: done
      )
    );
  }
}

在上面的示例中，命名参数onDone是一个回调，它接收一个参数：一个AuthData对象，其中包含所有身份验证信息。我们将在下一节中讨论AuthData，但这是如何通过onDone回调将AuthData对象传递到下一个屏幕。

done(AuthData authData){
  print(authData);

  /// You can pass the [AuthData] object to a 
  /// post-authentication screen. It contaions 
  /// all the user and OAuth data collected during
  /// the authentication process. In this example,
  /// our post-authentication screen is "complete-profile".
  Navigator.pushReplacementNamed(
      context, '/complete-profile', arguments: authData
  );
}

第三步 – 使用AuthData。

AuthData对象包含在身份验证过程中收集的所有信息。它包含用户数据和身份验证元数据。如上面的代码示例所示，此对象已传递给“authenticate”回调函数。让我们看一下它的结构。

class AuthData {
  final String userID; // User's profile id
  final String firstName; // User's first name
  final String lastName; // User's last name
  final String email; // User's email
  final String profileImgUrl; // User's profile image url
  final Map<String, dynamic> userJson; // Full returned user json
  final Map<String, String> response; // Full returned auth response.
  final String clientID; // OAuth client id
  final String accessToken; // OAuth access token
}

它提供了访问常用用户属性（userId、name、email、profile image）以及accessToken的快捷方式。完整的返回用户json可以通过userJson属性访问，您可以通过response属性访问完整的身份验证响应（我们收到API访问令牌的响应）。

第四步 – 欢庆！

您已成功在应用中实现了第三方身份验证！离发布又近了一步。欢庆！

调试

要将调试日志打印到控制台，只需将提供商的debug参数设置为true。例如：

var fbAuth = FacebookAuth()
fbAuth.debug = true;

愉快地进行OAuth！

参考

GitHub

https://github.com/e-oj/visa