Auth0-如何与 Flutter 一起使用答案

【问题标题】：Auth0-How to use with FlutterAuth0-如何与 Flutter 一起使用
【发布时间】：2019-04-04 05:37:00
【问题描述】：

我需要将 Auth0 与 Flutter 一起使用，但 Auth0 站点中没有这样的 SDK。

Auth0 致力于为 Flutter 创建这样的 SDK。

是否有人将 Auth0 与 Flutter 一起使用，或者您有什么建议？

【问题讨论】：

你检查了吗：Flutter and Auth0.
是的，我做到了。也许也会是另一种解决方案？
你试过了吗：github.com/WillyShakes/MasterLogin？

【解决方案1】：

有一个 auth0 package for flutter 可以使用 Auth0 API 提供登录、注销和访问 API 以在您的应用中进行身份验证。但是，您需要在 Flutter 项目中的 android 和 ios 文件中进行更改。您需要为此配置回调和应用程序设置，作者有他们的example on github，您应该查看。

【讨论】：

【解决方案2】：

我建议您关注 Auth0 团队提供的博客文章 - Get Started with Flutter Authentication

【讨论】：

【解决方案3】：

对于 Flutter Web App，我正在围绕 Auth0 JS SPA SDK 进行包装。

GitHub：https://github.com/anthonychwong/auth0-flutter-web

Pub.dev：https://pub.dev/packages/auth0_flutter_web

import 'package:auth0_flutter_web/auth0_flutter_web.dart';

Auth0 auth0 = await createAuth0Client(
  Auth0CreateOptions(
    domain: '-- domain of the universal login page --',
    client_id: '-- id of your app --',
  )
);

String token = await auth0.getTokenWithPopup();

目前还处于早期阶段，欢迎 PR。

【讨论】：

【解决方案4】：

flutter auth0 上手非常简单

为 auth0 设置一个类，并在需要它们的地方调用它。但也一定要设置常量AUTH0_DOMAIN、AUTH0_CLIENT_ID、AUTH0_REDIRECT_URI、AUTH0_ISSUER

class Auth0 {

  final FlutterAppAuth appAuth = FlutterAppAuth();

  Map<String, Object> parseIdToken(String idToken) {
    final List<String> parts = idToken.split('.');
    assert(parts.length == 3);
    return jsonDecode(
        utf8.decode(base64Url.decode(base64Url.normalize(parts[1]))));
  }

  Future<Map<String, Object>> getUserDetails(String accessToken) async {
    const String url = 'https://$AUTH0_DOMAIN/userinfo';
    final http.Response response = await http.get(
      url,
      headers: <String, String>{'Authorization': 'Bearer $accessToken'},
    );
    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to get user details');
    }
  }

  Future<void> loginAction() async {
      isBusy = true;
      errorMessage = 'Error! - ';

    try {
      final AuthorizationTokenResponse result =
          await appAuth.authorizeAndExchangeCode(
        AuthorizationTokenRequest(
          AUTH0_CLIENT_ID,
          AUTH0_REDIRECT_URI,
          issuer: 'https://$AUTH0_DOMAIN',
          scopes: <String>['openid', 'email', 'profile', 'offline_access'],
          promptValues: ['login']
        ),
      );

      final Map<String, Object> idToken = parseIdToken(result.idToken);
      final Map<String, Object> profile =
          await getUserDetails(result.accessToken);


        isBusy = false;
        name = idToken['name'];
        email = profile['email'];
        picture = profile['picture'];


    } on Exception catch (e, s) {
      print('login error: $e - stack: $s');

        isBusy = false;
        errorMessage = e.toString();
    }
  }

不要使用布尔值来检查 isLoggedIn，而是尝试将令牌保存在本地存储中，这样会将状态设置为原样。

【讨论】：