如何通过url_launcher/WEBVIEW实现社交登录并接收登录后消息

我希望通过后端实现的网页完成登录操作，但需要使用URL_LAUNCHER或WEBVIEW来进行登录。我想在完成社交登录后接收消息，但不清楚具体实现方法，恳请解答。

当前代码：

Future<void> signIn() async {
  String _url = "https://kauth.kakao.com/oauth/authorize?client_id=7f8c9995a36f55554348032c83b16b96&redirect_uri=ss";
  if(await launchUrl(Uri.parse(_url)));
}

解决方案 #

一、使用url_launcher实现登录回调 #

1. 配置自定义URL Scheme

• Android端：在AndroidManifest.xml的FlutterActivity中添加intent-filter

  <activity android:name="io.flutter.embedding.android.FlutterActivity">
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <!-- 替换为你的自定义Scheme，示例：yourapp://login -->
          <data android:scheme="yourapp" />
      </intent-filter>
  </activity>
  

• iOS端：在Info.plist中添加URL Scheme配置

  <key>CFBundleURLTypes</key>
  <array>
      <dict>
          <key>CFBundleURLSchemes</key>
          <array>
              <string>yourapp</string>
          </array>
      </dict>
  </array>
  

2. 修正授权链接的redirect_uri

将Kakao授权链接的redirect_uri改为自定义Scheme地址，同时补充response_type=code参数：

Future<void> signIn() async {
  String _url = "https://kauth.kakao.com/oauth/authorize?client_id=7f8c9995a36f55554348032c83b16b96&redirect_uri=yourapp://login/callback&response_type=code";
  if (await canLaunchUrl(Uri.parse(_url))) {
    await launchUrl(Uri.parse(_url), mode: LaunchMode.externalApplication);
  }
}

3. 监听URL回调

在main函数中监听App启动时的URL参数，获取授权码：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 处理回调URL中的授权码
  final uri = Uri.base;
  final code = uri.queryParameters['code'];
  if (code != null) {
    handleAuthCode(code);
  }
  runApp(const MyApp());
}

void handleAuthCode(String code) {
  // 将code传给后端，换取用户信息或登录凭证
  print("获取到授权码：$code");
  // 后续登录逻辑处理
}

二、使用WebView实现登录回调 #

WebView方式无需跳转外部浏览器，更可控：

1. 添加依赖

在pubspec.yaml中引入webview_flutter：

dependencies:
  webview_flutter: ^4.4.0

2. 实现带回调拦截的WebView页面

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

class LoginWebView extends StatefulWidget {
  const LoginWebView({super.key});

  @override
  State<LoginWebView> createState() => _LoginWebViewState();
}

class _LoginWebViewState extends State<LoginWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse(
          "https://kauth.kakao.com/oauth/authorize?client_id=7f8c9995a36f55554348032c83b16b96&redirect_uri=yourapp://login/callback&response_type=code"))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 拦截回调URL，提取授权码
            if (request.url.startsWith('yourapp://login/callback')) {
              final uri = Uri.parse(request.url);
              final code = uri.queryParameters['code'];
              if (code != null) {
                handleAuthCode(code);
                Navigator.pop(context); // 关闭WebView页面
              }
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  void handleAuthCode(String code) {
    // 将code传给后端完成登录流程
    print("获取到授权码：$code");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: WebViewWidget(controller: controller),
    );
  }
}

3. 启动WebView登录页

修改signIn方法：

Future<void> signIn(BuildContext context) async {
  Navigator.push(context, MaterialPageRoute(builder: (_) => const LoginWebView()));
}

关键注意事项 #

1. 必须在Kakao开发者平台的应用设置中，将自定义Scheme的redirect_uri添加到「允许的回调地址」列表，否则授权会失败。
2. 授权码code只能使用一次，需由后端调用Kakao接口换取access_token，再获取用户信息，最后返回前端登录状态。

内容的提问来源于stack exchange，提问作者씨마스터300