Authing Guard 开源项目使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00016/article/details/138839125

Authing Guard 开源项目使用教程

Guard 📌 Authing SSO login widget - Your Guard. (🚄Production Ready) 项目地址: https://gitcode.com/gh_mirrors/gua/Guard

1、项目介绍

Authing Guard 是一个可嵌入的登录表单组件，专为单页应用程序设计。它允许开发者根据需求进行配置，并支持多种社交登录方式，使用户能够在不同平台上无缝登录，并获得一致的登录体验。Guard 组件屏蔽了许多底层认证实现的细节，简化了 UI 开发过程。它支持与 React、Vue.js、Angular 和原生 JavaScript 项目集成，帮助开发者快速实现登录认证流程。

2、项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 Authing Guard 组件：

npm install @authing/guard

初始化 Guard 组件

在你的项目中引入并初始化 Guard 组件。以下是一个简单的 React 示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Guard } from '@authing/guard';

const guard = new Guard({
  appId: 'YOUR_APP_ID', // 替换为你的 Authing App ID
  redirectUri: 'YOUR_REDIRECT_URI', // 替换为你的重定向 URI
});

ReactDOM.render(<Guard />, document.getElementById('root'));

配置登录方式

Guard 组件支持多种登录方式，如账号密码登录、手机验证码登录、社交登录等。你可以在初始化时配置这些登录方式：

const guard = new Guard({
  appId: 'YOUR_APP_ID',
  redirectUri: 'YOUR_REDIRECT_URI',
  loginMethods: ['password', 'phone-code', 'social'], // 配置登录方式
});

处理登录回调

在用户登录成功后，Guard 组件会重定向到你配置的 redirectUri，并附带登录信息。你可以在回调页面中处理这些信息：

import { useEffect } from 'react';
import { Guard } from '@authing/guard';

const CallbackPage = () => {
  useEffect(() => {
    const guard = new Guard({
      appId: 'YOUR_APP_ID',
      redirectUri: 'YOUR_REDIRECT_URI',
    });

    guard.handleRedirectCallback().then((userInfo) => {
      console.log('登录成功', userInfo);
      // 处理用户信息
    });
  }, []);

  return <div>处理登录回调...</div>;
};

export default CallbackPage;