Flutter OAuth2认证插件oauth2的使用

关于OAuth2

OAuth2允许客户端（使用此库的程序）访问和操作由资源所有者（最终用户）拥有的远程服务器上的资源。客户端将资源所有者引导到授权服务器（通常是托管资源的同一服务器），资源所有者会告知授权服务器给客户端一个访问令牌。这个令牌作为客户端有权代表资源所有者访问资源的证明。

目前，oauth2包支持以下几种OAuth2授权方式：

• Authorization Code Grant
• Client Credentials Grant
• Resource Owner Password Grant

Authorization Code Grant

示例代码

import 'dart:io';
import 'package:oauth2/oauth2.dart' as oauth2;
import 'package:url_launcher/url_launcher.dart';
import 'package:uni_links/uni_links.dart';

final authorizationEndpoint = Uri.parse('http://example.com/oauth2/authorization');
final tokenEndpoint = Uri.parse('http://example.com/oauth2/token');
const identifier = 'my client identifier';
const secret = 'my client secret';
final redirectUrl = Uri.parse('http://my-site.com/oauth2-redirect');
final credentialsFile = File('~/.myapp/credentials.json');

Future<oauth2.Client> createClient() async {
  var exists = await credentialsFile.exists();

  if (exists) {
    var credentials = oauth2.Credentials.fromJson(await credentialsFile.readAsString());
    return oauth2.Client(credentials, identifier: identifier, secret: secret);
  }

  var grant = oauth2.AuthorizationCodeGrant(identifier, authorizationEndpoint, tokenEndpoint, secret: secret);
  var authorizationUrl = grant.getAuthorizationUrl(redirectUrl);

  // Launch the authorization URL in a web browser.
  if (await canLaunch(authorizationUrl.toString())) {
    await launch(authorizationUrl.toString());
  }

  // Listen for the redirect.
  final linksStream = getLinksStream().listen((Uri uri) async {
    if (uri.toString().startsWith(redirectUrl.toString())) {
      var responseUrl = uri;
      var client = await grant.handleAuthorizationResponse(responseUrl.queryParameters);
      await credentialsFile.writeAsString(client.credentials.toJson());
      return client;
    }
  });

  // Wait for the stream to emit an event or timeout after a minute.
  await linksStream.first.timeout(Duration(minutes: 1));
}

void main() async {
  try {
    var client = await createClient();
    print(await client.read(Uri.http('example.com', 'protected-resources.txt')));
  } catch (e) {
    print("Error during OAuth2 flow: $e");
  }
}

Client Credentials Grant

示例代码

import 'dart:io';
import 'package:oauth2/oauth2.dart' as oauth2;

final authorizationEndpoint = Uri.parse('http://example.com/oauth2/authorization');
const identifier = 'my client identifier';
const secret = 'my client secret';
final credentialsFile = File('~/.myapp/credentials.json');

void main() async {
  try {
    var client = await oauth2.clientCredentialsGrant(authorizationEndpoint, identifier, secret);
    print(await client.read(Uri.http('example.com', 'api/some_resource.json')));
    await credentialsFile.writeAsString(client.credentials.toJson());
  } catch (e) {
    print("Error during OAuth2 flow: $e");
  }
}

Resource Owner Password Grant

示例代码

import 'dart:io';
import 'package:oauth2/oauth2.dart' as oauth2;

final authorizationEndpoint = Uri.parse('http://example.com/oauth2/authorization');
final username = 'example user';
final password = 'example password';
const identifier = 'my client identifier';
const secret = 'my client secret';
final credentialsFile = File('~/.myapp/credentials.json');

void main() async {
  try {
    var client = await oauth2.resourceOwnerPasswordGrant(authorizationEndpoint, username, password, identifier: identifier, secret: secret);
    print(await client.read(Uri.http('example.com', 'protected-resources.txt')));
    await credentialsFile.writeAsString(client.credentials.toJson());
  } catch (e) {
    print("Error during OAuth2 flow: $e");
  }
}

实现 redirect 和 listen

对于Flutter应用，有两种常见的实现方法：

1. 使用url_launcher和uni_links

   • 使用url_launcher打开浏览器并监听重定向。

2. 使用webview_flutter

   • 在应用内部启动WebView并监听重定向。

使用url_launcher和uni_links

import 'package:url_launcher/url_launcher.dart';
import 'package:uni_links/uni_links.dart';

Future<void> redirect(Uri url) async {
  if (await canLaunch(url.toString())) {
    await launch(url.toString());
  }
}

Future<Uri> listen(Uri url) async {
  final linksStream = getLinksStream().listen((Uri uri) async {
    if (uri.toString().startsWith(url.toString())) {
      return uri;
    }
  });

  // Wait for the stream to emit an event or timeout after a minute.
  return await linksStream.first.timeout(Duration(minutes: 1));
}

使用webview_flutter

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  final String authorizationUrl;

  WebViewPage({required this.authorizationUrl});

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

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;
  Uri? _responseUrl;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Authorization')),
      body: WebView(
        initialUrl: widget.authorizationUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        navigationDelegate: (NavigationRequest navReq) {
          if (navReq.url.startsWith('http://my-site.com/oauth2-redirect')) {
            setState(() {
              _responseUrl = Uri.parse(navReq.url);
            });
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    );
  }

  Uri? get responseUrl => _responseUrl;
}

通过上述示例代码，您可以根据需要选择适合的方法来实现OAuth2认证流程。希望这些示例能帮助您更好地理解和使用Flutter中的OAuth2认证插件。