Flutter GitHub登录插件github_signin_aksoyhlc的使用

Flutter GitHub登录插件github_signin_aksoyhlc的使用

在本教程中，我们将展示如何在Flutter应用中使用github_signin_aksoyhlc插件进行GitHub登录。该插件允许用户通过GitHub账号进行身份验证。

获取开始

首先，在pubspec.yaml文件中添加插件依赖：

dependencies:
  github_signin_aksoyhlc: any

然后运行flutter pub get以安装依赖。

示例 1

以下是一个简单的示例，展示了如何使用github_signin_aksoyhlc插件进行GitHub登录。

var params = GithubParamsModel(
  clientId: 'xxxxxx', // 替换为你的GitHub客户端ID
  clientSecret: 'yyyyyy', // 替换为你的GitHub客户端密钥
  callbackUrl: 'http://example.com', // 替换为你的回调URL
  scopes: 'read:user,user:email', // 设置所需的权限范围
);

GithubSignInResponse result = await GithubSignIn.signIn(context, params: params);

if (result.status != ResultStatus.success) {
  // 处理错误
  print(result.message);
} else {
  ///TODO: 使用结果数据
}

示例 2

另一种方式是使用Navigator来启动登录页面，并处理返回的结果。

var params = GithubParamsModel(
  clientId: 'xxxxxx', // 替换为你的GitHub客户端ID
  clientSecret: 'yyyyyy', // 替换为你的GitHub客户端密钥
  callbackUrl: 'http://example.com', // 替换为你的回调URL
  scopes: 'read:user,user:email', // 设置所需的权限范围
);

dynamic result = Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => GithubSignIn(params: params)),
);

if (result == null) {
  // 用户取消了登录或发生错误
}

var data = result as GithubSignInResponse;

if (data.status != ResultStatus.success) {
  print(result.message);
}

///TODO: 使用响应数据

自定义AppBar

你还可以自定义登录页面的AppBar，以便更好地与你的应用设计保持一致。

GithubSignIn(
  params: params,
  appBar: PreferredSize(
    child: AppBar(
      title: Text("GitHub 登录"),
    ),
    preferredSize: const Size.fromHeight(56),
  ),
)

完整示例Demo

以下是完整的示例代码，包含了一个带有GitHub登录按钮的应用主页面。

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                var params = GithubParamsModel(
                  clientId: 'xxxxxx', // 替换为你的GitHub客户端ID
                  clientSecret: 'yyyyyy', // 替换为你的GitHub客户端密钥
                  callbackUrl: 'http://example.com', // 替换为你的回调URL
                  scopes: 'read:user,user:email', // 设置所需的权限范围
                );

                dynamic result = Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => GithubSignIn(params: params)),
                );

                if (result == null) {
                  // 用户取消了登录或发生错误
                }

                var data = result as GithubSignInResponse;

                if (data.status != ResultStatus.success) {
                  print(result.message);
                }
              },
              child: const Text("使用GitHub登录"),
            )
          ],
        ),
      ),
    );
  }
}