Flutter GitHub登录插件github_signin_promax的使用

Flutter GitHub登录插件github_signin_promax的使用

github_signin_promax 包

使用GitHub进行登录(Sign In With GitHub Promax)

开始使用

pubspec.yaml 文件中添加包依赖:

dependencies:
  github_signin_promax: ^0.0.8+1

执行 flutter pub get 来安装该包。

如何使用

以下是一个完整的示例代码,展示了如何使用 github_signin_promax 插件进行GitHub登录。

import 'package:flutter/material.dart';
import 'package:github_signin_promax/github_signin_promax.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(
        primarySwatch: Colors.blue,
      ),
      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> {
  int _counter = 0;
  String response = '';

  void _incrementCounter() {
    setState(() {
      response = '';
    });

    // 创建必要的参数
    var params = GithubSignInParams(
      clientId: '78e934c70db313a3ec9b', // 你的GitHub客户端ID
      clientSecret: '74a8f1dbcd5a1fac59516969bb874e634faf666b', // 你的GitHub客户端密钥
      redirectUrl: 'http://localhost:3000/auth/github/callback', // 重定向URL
      scopes: 'read:user,user:email', // 需要的权限范围
    );

    // 导航到GitHub登录屏幕并获取响应
    Navigator.of(context).push(MaterialPageRoute(builder: (builder) {
      return GithubSigninScreen(
        params: params,
        headerColor: Colors.green, // 登录页面头部颜色
        title: 'Login with github', // 登录页面标题
      );
    })).then((value) {
      if (value != null) {
        setState(() {
          response += '✅ 状态: \t ${value.status}\n\n';
          response += '✅ 访问令牌: \t ${value.accessToken}\n\n';
          response += '✅ 错误信息: \t ${value.error}\n\n';
        });
      } else {
        setState(() {
          response += '登录失败\n';
        });
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              response,
              style: TextStyle(color: Colors.green, fontSize: 20),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Login',
        child: const Icon(Icons.login),
      ),
    );
  }
}

更多关于Flutter GitHub登录插件github_signin_promax的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GitHub登录插件github_signin_promax的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


github_signin_promax 是一个 Flutter 插件,用于在 Flutter 应用中实现 GitHub 登录功能。它简化了与 GitHub OAuth 的集成,使得开发者可以轻松地在应用中添加 GitHub 登录功能。

以下是使用 github_signin_promax 插件的步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 github_signin_promax 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  github_signin_promax: ^1.0.0  # 请使用最新版本

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

2. 在 GitHub 上注册 OAuth App

在 GitHub 上注册一个新的 OAuth App,并获取 Client IDClient Secret

  1. 登录到 GitHub。
  2. 导航到 Settings > Developer settings > OAuth Apps
  3. 点击 New OAuth App
  4. 填写应用信息,包括 Application nameHomepage URLAuthorization callback URL
  5. 点击 Register application,然后记下 Client IDClient Secret

3. 配置 Flutter 应用

在你的 Flutter 应用中,配置 github_signin_promax 插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GitHubLoginScreen(),
    );
  }
}

class GitHubLoginScreen extends StatelessWidget {
  final GithubSignIn githubSignIn = GithubSignIn(
    clientId: 'YOUR_CLIENT_ID', // 替换为你的 GitHub Client ID
    clientSecret: 'YOUR_CLIENT_SECRET', // 替换为你的 GitHub Client Secret
    redirectUrl: 'YOUR_REDIRECT_URL', // 替换为你的 Redirect URL
    scopes: ['user'], // 你需要的权限范围
  );

  Future<void> _signInWithGitHub(BuildContext context) async {
    try {
      final result = await githubSignIn.signIn(context);
      // 登录成功后的处理
      print('Access Token: ${result.token}');
      print('User Info: ${result.user}');
    } catch (error) {
      // 处理错误
      print('Error: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GitHub Login'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _signInWithGitHub(context),
          child: Text('Sign in with GitHub'),
        ),
      ),
    );
  }
}

4. 处理登录结果

_signInWithGitHub 方法中,你可以处理登录成功后的结果,例如获取用户的访问令牌和用户信息。

5. 运行应用

现在,你可以运行你的 Flutter 应用,并测试 GitHub 登录功能。

flutter run
回到顶部