Flutter登录认证插件flutter_login_yandex_updated的使用

Flutter登录认证插件flutter_login_yandex_updated的使用

开始使用

  1. 在你的 pubspec.yaml 文件中添加 flutter_login_yandex_updated 插件。

  2. 注册Yandex OAuth应用,详见官方文档。

  3. 设置Android环境。

  4. 设置iOS环境。

YandexLoginSDK版本信息

  • iOS: 3.0.1
  • Android: 2.5.1

最低要求

  • iOS: 12.0
  • Android: minSdkVersion 21

SDK文档

Android设置

android/app/build.gradle 文件的默认部分添加以下代码,并将 yourClientId 替换为你的Yandex OAuth应用客户端ID:

defaultConfig {
    applicationId "com.example.flutter_login_yandex_example"
    minSdkVersion flutter.minSdkVersion
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    manifestPlaceholders += [YANDEX_CLIENT_ID:"yourClientId"]
}

iOS设置

Info.plist 文件中添加以下配置,并将 yourClientId 替换为你的Yandex客户端ID:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>primaryyandexloginsdk</string>
    <string>secondaryyandexloginsdk</string>
</array>
<key>YAClientId</key>
<string>yourClientId</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>YandexLoginSDK</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yxyourClientId</string>
        </array>
    </dict>
</array>

同时,你需要在 Entitlements 中启用 Associated Domains 功能,并输入相应的域名(将 yourClientId 替换为实际值):

applinks:yxyourClientId.oauth.yandex.ru

使用示例

以下是一个简单的示例代码,展示了如何使用 flutter_login_yandex_updated 插件进行登录认证:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_login_yandex_updated/flutter_login_yandex.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _token = 'empty';
  final _flutterLoginYandexPlugin = FlutterLoginYandex();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('Token: $_token\n', textAlign: TextAlign.center),
              InkWell(
                onTap: () async {
                  final response = await _flutterLoginYandexPlugin.signIn();
                  if (response != null) {
                    setState(() {
                      if (response.containsKey('token')) {
                        _token = response['token'] as String;
                      } else if (response.containsKey('error')) {
                        _token = response['error'] as String;
                      }
                    });
                  }
                },
                child: const Padding(
                  padding: EdgeInsets.all(15),
                  child: Text('点击登录'),
                ),
              ),
              if (Platform.isIOS)
                InkWell(
                  onTap: () async {
                    // 忽略: 未使用的局部变量
                    final response = await _flutterLoginYandexPlugin.signOut();
                    setState(() => _token = '');
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(15),
                    child: Text('退出登录'),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_login_yandex_updated插件来实现Yandex登录认证的一个基本示例。这个插件允许你通过Yandex OAuth 2.0进行用户认证。

首先,你需要在你的Flutter项目中添加这个插件。确保你的pubspec.yaml文件中包含以下依赖项:

dependencies:
  flutter:
    sdk: flutter
  flutter_login_yandex_updated: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来获取依赖项。

接下来,你需要设置Yandex OAuth应用。前往Yandex OAuth开发者页面创建一个新的应用,并获取CLIENT_IDCLIENT_SECRET

在你的Flutter应用中,你可以按照以下步骤进行Yandex登录认证:

  1. 配置插件

在你的主文件(例如main.dart)中,你需要配置YandexLogin插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Yandex Login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: YandexLoginPage(),
    );
  }
}

class YandexLoginPage extends StatefulWidget {
  @override
  _YandexLoginPageState createState() => _YandexLoginPageState();
}

class _YandexLoginPageState extends State<YandexLoginPage> {
  final YandexLogin _yandexLogin = YandexLogin(
    clientId: '你的CLIENT_ID', // 替换为你的CLIENT_ID
    redirectUri: '你的REDIRECT_URI', // 替换为你的REDIRECT_URI,通常是你的应用的回调URL
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yandex Login Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              String url = await _yandexLogin.getAuthorizationUrl();
              // 通常这里你会启动一个WebView或系统浏览器来打开这个URL
              // 这里为了演示,我们直接打印URL
              print('Open this URL in a WebView or browser: $url');

              // 假设用户完成了认证并返回到了你的应用(通过回调URI)
              // 你需要捕获回调并提取code参数,然后用它来获取access_token
              // 这里我们模拟一个code
              String code = '模拟的code'; // 在实际使用中,你需要从回调URL中提取这个code

              YandexLoginResult result = await _yandexLogin.getAccessToken(code);
              if (result.status == 'ok') {
                print('Access Token: ${result.accessToken}');
                print('User Info: ${result.userInfo}');
              } else {
                print('Error: ${result.errorDescription}');
              }
            } catch (e) {
              print('Error: $e');
            }
          },
          child: Text('Login with Yandex'),
        ),
      ),
    );
  }
}

注意

  • 在实际应用中,你需要使用url_launcherwebview_flutter等插件来打开并处理Yandex的授权URL。上面的代码只是打印了URL,作为演示。
  • redirectUri应该是你在Yandex开发者控制台中配置的回调URI。
  • 用户完成授权后,Yandex会重定向到这个URI并附带一个code参数。你需要捕获这个code并用它来请求access_token
  • YandexLoginResult包含了认证的结果,包括accessToken和用户信息(如果请求了)。

这个示例只是一个基本的框架,你可能需要根据你的具体需求进行调整,比如处理错误、优化用户体验等。

回到顶部