Flutter GitHub登录插件github_signin_promax_new的使用

Flutter GitHub登录插件github_signin_promax_new的使用

github_signin_promax_new包

使用GitHub进行登录的Promax版本 https://pub.dev/packages/github_signin_promax_new

开始使用

添加包依赖

pubspec.yaml文件中添加以下依赖:

github_signin_promax_new: ^0.0.7

执行flutter pub get以获取依赖。

如何使用

创建所需的参数

首先,创建一个GithubSignInParams对象,其中包含必要的参数:

var params = GithubSignInParams(
  clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  clientSecret: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
  redirectUrl: 'http://localhost:3000/auth/github/callback',
  scopes: 'read:user,user:email',
);

执行登录并获取响应

GithubSigninScreen推入导航栈以执行登录操作,并获取GithubSignInResponse对象:

Navigator.of(context).push(MaterialPageRoute(builder: (builder) {
  return GithubSigninScreen(
    params: params,
    headerColor: Colors.green,
    title: 'Login with github',
  );
})).then((value) {
  // 处理返回值作为GithubSignInResponse实例
});

示例代码

示例代码:example/lib/main.dart

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

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

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

  @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
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final int _counter = 0;
  String response = '';

  void _incrementCounter() {
    setState(() {
      response = '';
    });
    var params = GithubSignInParams(
      clientId: '78e934c70db313a3ec9b',
      clientSecret: '74a8f1dbcd5a1fac59516969bb874e634faf666b',
      redirectUrl: 'http://localhost:3000/auth/github/callback',
      scopes: 'read:user,user:email',
    );

    Navigator.of(context).push(MaterialPageRoute(builder: (builder) {
      return GithubSigninScreen(
        params: params,
      );
    })).then((value) {
      setState(() {
        response += '✅ 状态: \t ${(value as GithubSignInResponse).status}\n\n';
        response += '✅ 访问令牌: \t ${(value).accessToken}\n\n';
        response += '✅ 错误: \t ${(value).error}\n\n';
      });
    });
  }

  @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: const TextStyle(color: Colors.green, fontSize: 20),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Login',
        child: const Icon(Icons.login),
      ),
    );
  }
}

展示

展示


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

1 回复

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


github_signin_promax_new 是一个用于在 Flutter 应用程序中实现 GitHub 登录的插件。通过该插件,开发者可以轻松集成 GitHub 登录功能,获取用户的 GitHub 身份信息以及访问令牌,从而实现基于 GitHub 的身份验证。

以下是使用 github_signin_promax_new 插件的详细步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 github_signin_promax_new 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  github_signin_promax_new: ^latest_version

请将 ^latest_version 替换为插件的最新版本号。你可以在 pub.dev 上查找最新的版本。

2. 获取 GitHub OAuth 应用凭证

在 GitHub 上注册一个 OAuth 应用,并获取 Client IDClient Secret。你需要在 GitHub Developer Settings 中创建一个新的 OAuth 应用,并设置回调 URL(例如:myapp://callback)。

3. 配置 Android 和 iOS

为了让 GitHub 登录功能正常工作,你需要在 Android 和 iOS 项目中进行一些配置。

Android 配置

android/app/build.gradle 文件中,确保 minSdkVersion 至少为 21。

android/app/src/main/AndroidManifest.xml 文件中,添加以下 intent-filter 以便处理回调:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

iOS 配置

ios/Runner/Info.plist 文件中,添加以下配置以处理回调:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

4. 在 Flutter 项目中集成 GitHub 登录

在 Flutter 项目中,使用 github_signin_promax_new 插件来实现 GitHub 登录。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GitHub SignIn Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GitHubSignInDemo(),
    );
  }
}

class GitHubSignInDemo extends StatelessWidget {
  final GitHubSignIn _githubSignIn = GitHubSignIn(
    clientId: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    redirectUrl: 'myapp://callback',
    scope: '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](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GitHub SignIn Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _signInWithGitHub(context),
          child: Text('Sign in with GitHub'),
        ),
      ),
    );
  }
}
回到顶部