Flutter中如何将Firebase Authentication与LinkedIn对接？

问题说明 #

已通过linkedin_login插件完成LinkedIn认证，成功获取accessToken和用户资料，但调用firebase_auth的signInWithCredential()方法同步认证信息到Firebase时，出现以下错误：

[firebase_auth/channel-error] "dev.flutter.pigeon.firebase_auth_platform_interface.FirebaseAuthHostApi.signInWithCredential"

同时Firebase认证控制台中未显示LinkedIn提供商选项。

相关代码 #

主页面认证触发代码 #

class LinkedInAuthSample extends StatelessWidget {
  const LinkedInAuthSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LinkedInButtonStandardWidget(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute<void>(
                builder: (final BuildContext _) => LinkedinAuthPage(
                  onLinkedAuth: (AuthLinkedUser linkedUser) {
                    debugPrint(
                        "LINkED USER ===========>${linkedUser.toJson()}");
                    linkedInAuthToFirebase(linkedUser);
                  },
                ),
                fullscreenDialog: true,
              ),
            );
          },
        ),
      ),
    );
  }
// 尝试将LinkedIn认证信息同步到Firebase
linkedInAuthToFirebase(AuthLinkedUser linkedUser) async {
    try {
      final AuthCredential credential = AuthCredential(
          accessToken: linkedUser.accessToken,
          providerId: 'linkedin.com',
          signInMethod: 'password');

      final userCredentialData =
          await FirebaseAuth.instance.signInWithCredential(credential);
    } catch (e) {
      debugPrint("Authentication failed: $e");
    }
  }
}

LinkedIn认证页面代码 #

import 'package:flutter/material.dart';
import 'package:linkedin_login/linkedin_login.dart';
import 'package:whatisyoura/modules/login/models/linked_user.dart';

const String redirectUrl =
    "https://www.linkedin.com/developers/tools/oauth/redirect";
const String clientId = '8....';
const String clientSecret = 'WP.....';

class LinkedinAuthPage extends StatefulWidget {
  final bool destroySession;
  final Function(AuthLinkedUser linkedUser) onLinkedAuth;
  const LinkedinAuthPage(
      {super.key, this.destroySession = false, required this.onLinkedAuth});

  @override
  State<LinkedinAuthPage> createState() => _LinkedinAuthPageState();
}

class _LinkedinAuthPageState extends State<LinkedinAuthPage> {
  @override
  Widget build(BuildContext context) {
    return LinkedInUserWidget(
      appBar: AppBar(
        title: const Text('OAuth User'),
      ),
      destroySession: widget.destroySession,
      redirectUrl: redirectUrl,
      clientId: clientId,
      clientSecret: clientSecret,
      onError: (final UserFailedAction e) {
        debugPrint('Error: ${e.toString()}');
        debugPrint('Error: ${e.stackTrace.toString()}');
        widget.onLinkedAuth(AuthLinkedUser(
            accessToken: null,
            firstName: null,
            lastName: null,
            email: null,
            profileImageUrl: null,
            exception: e.exception));
      },
      onGetUserProfile: (final UserSucceededAction linkedInUser) {
        
        var user = AuthLinkedUser(
          firstName: linkedInUser.user.givenName,
          lastName: linkedInUser.user.familyName,
          email: linkedInUser.user.email,
          profileImageUrl: linkedInUser.user.picture,
          accessToken: linkedInUser.user.token.accessToken,
        );
        widget.onLinkedAuth(user);

        Navigator.pop(context);
      },
    );
  }
}

Firebase控制台截图 #

解决步骤 #

1. 启用Firebase的LinkedIn提供商 #

Firebase默认不显示LinkedIn提供商，需手动开启：

• 进入Firebase控制台，打开Authentication > 登录方式
• 点击添加新提供商，找到并选择LinkedIn
• 填入LinkedIn开发者应用的Client ID和Client Secret，保存配置

2. 修正Firebase凭证创建逻辑 #

直接实例化AuthCredential是错误用法，需使用LinkedInAuthProvider创建标准OAuth凭证：

linkedInAuthToFirebase(AuthLinkedUser linkedUser) async {
    try {
      final OAuthCredential credential = LinkedInAuthProvider.credential(
        linkedUser.accessToken!,
      );

      final userCredentialData =
          await FirebaseAuth.instance.signInWithCredential(credential);
      // 成功后可获取Firebase用户信息
      debugPrint("Firebase用户ID: ${userCredentialData.user?.uid}");
    } catch (e) {
      debugPrint("Authentication failed: $e");
    }
  }

3. 校验LinkedIn应用配置 #

• 在LinkedIn开发者平台，确保OAuth 2.0设置中的重定向URI与Firebase控制台填写的一致
• 确认请求权限包含email和profile，保证能获取必要的用户资料

内容的提问来源于stack exchange，提问作者Shruti Ramnandan Sharma