阿里的Node.js框架midway实现接入第三方授权登陆

本文首发于掘金 https://juejin.cn/post/7185009884646080567

前言

难易程度: 简单

背景

最近在写闪调想接第三方授权登陆,比如微信的扫码登陆。 qq、github、钉钉等授权登陆, 大家肯定在第三方网站用过其中之一。

它是基于OAuth2.0协议标准设计的,接过一家的,你会发现其他家的都一样。

理清逻辑

我们拿微信的的整体流程举例。


1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据 code 参数;
2. 通过 code 参数加上 AppID 和AppSecret等,通过 API 换取access_token;
3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

上一张官方图

image.png

1、跳转到第三方授权页面。

首先得得让用户点击之后跳到一个去操作授权的页面, 或者内嵌。

比如这个

image.png

这个

image.png

2、用户授权, 带着authCode回调咱们后端接口

3、 authCode换取token, token获取用户信息, 定向首页。

这一步后端写个接口, 用authCode换取token, token再获取用户信息,

然后处理自己的业务逻辑,重定向到首页,至此,登陆完成。

示例地址

http://st.mawenqing.net/api/user/login

代码实现

我们以nodejs的midwayjs框架为例

midwayjs是阿里开源的面相未来的nodejs框架

midway官网 http://www.midwayjs.org/

第三方授权用的钉钉, 本来想用微信,后来发现微信开放平台个人不好注册。

1、定向到授权页面

调登陆接口, 后端重定向到钉钉授权页面

于是需要一个后端的重定向的接口, 如下


import {Inject, Controller, Get, Query} from '@midwayjs/decorator';
import {Context} from '@midwayjs/koa';
import {UserService} from '../service/user.service';
import {AliYunService} from '../service/aliyun.service';
import BaseController from "../core/baseController";

@Controller('/api/user')
export class UserController extends BaseController {
    @Inject()
    ctx: Context;

    @Inject()
    userService: UserService;
    
    @Get('/login')
    async login() {
        const url = this.userService.dingTalkLogin();
        this.ctx.redirect(url)
    }
}

2、用户操作后、带着code回调, 处理逻辑。

带着code回调咱们,其实是一个重定向, 可以看做get请求。

于是写一个接口, 来处理回调请求

  • a、用code获取AccessToken
  • b、AccessToken换取用户信息
  • c、后面就处理业务逻辑了,示例比如 判断用户是否存在, 存在就登陆,不存在,注册,并登陆,最后重定向到首页。
/**
 * 用户授权回调
 * @param authCode
 */
@Get('/auth')
async auth(@Query('authCode') authCode) {
    // a、用code获取AccessToken
    const result = await this.userService.userAccessToken(authCode);
    if (!result.accessToken) {
        return this.fail()
    }
    // b、AccessToken换取用户信息
    const userInfo = await this.userService.getUserInfo(result.accessToken)
    
    // c、后面就处理业务逻辑了,示例比如 判断用户是否存在, 存在就登陆,不存在,注册,并登陆,最后重定向到首页。
    
    // 判断用户是否存在
    let user: any = await this.userService.findUser({openId: userInfo.openId})
    if (!user) {
        user = {
            openId: userInfo.openId,
            avatarUrl: userInfo.avatarUrl,
            userName: userInfo.nick,
            mobile: userInfo.mobile,
            createTime: new Date()
        }
        // 不存在注册存库
        await this.userService.saveUser(user)
    }
    // 设置cookies, 这样就登陆了 伪代码
    this.ctx.cookies.set('st_user', JSON.stringify(user), {
        path: '/', // 写cookie所在的路径
        maxAge: 10 * 60 * 1000, // cookie有效时长
        // expires: new Date('2017-02-15'), // cookie失效时间
        httpOnly: true, // 是否只用于http请求中获取
        overwrite: false, // 是否允许重写
        encrypt: true, // 加密传输
    });
    // 重定向到首页
    this.ctx.redirect('/')
}

github代码链接

https://github.com/girl-email/st-server-nodejs/blob/feature-1.0/src/controller/user.controller.ts

总结

通过以上, 我们了解了第三方授权登陆的基本流程, 并且实现了钉钉第三方网站授权登陆, 今天就到这了,希望对你有所帮助,我们下期见。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Node.js is a massively popular JavaScript library that lets you use JavaScript to easily program scalable network applications and web services. People approaching Node.js for the first time are often attracted by its efficiency, scalability, and the fact that it’s based on JavaScript, the language of the Web, which means that developers can use the same language to write backend code. Also, it’s increasingly being seen as a “modern” replacement for PHP in web development, which relies on fast-paced data exchange. The growing community and the large amount of available modules makes Node.js one of the most attractive development environments. This book takes a step-wise and incremental approach toward developing cross-platform mobile technologies using existing web technologies. This will allow you to truly understand and become proficient in developing cross-platform mobile applications with Node.js, Ionic Framework, and MongoDB. The book starts off by introducing all the necessary requirements and knowledge to build a mobile application with a companion web service. It covers the ability to create an API from scratch and implement a comprehensive user database that will give you the opportunity to offer a mobile application with a personalized experience. Midway through the book, you will learn the basic processes to create a successful mobile application. You will also gain higher-level knowledge, allowing you to develop a functional and secure mobile application to ensure a seamless user experience for end users. Finally, the book ends with more advanced projects, which will bring together all the knowledge and expertise developed in the previous chapters to create a practical and functional mobile-application that has useful real-world features.
midway 使用 gRPC 和 Consul 实现订单支付的具体步骤如下: 1. 定义 gRPC 的服务和方法:在 midway 中,可以使用 @grpc/proto-loader 来加载 proto 文件,然后定义服务和方法。例如: ```typescript import { GrpcMethod, GrpcService } from '@midwayjs/grpc'; import * as protoLoader from '@grpc/proto-loader'; import * as grpc from 'grpc'; @GrpcService() export class OrderService { @GrpcMethod() async payOrder(ctx: Context<{}>, order: PaymentOrder): Promise<PaymentResponse> { // 支付订单的逻辑 } } // 加载 proto 文件 const packageDefinition = protoLoader.loadSync(path.resolve(__dirname, 'order.proto')); const grpcObject = grpc.loadPackageDefinition(packageDefinition); const orderPackage = grpcObject.order; // 定义服务和方法 export interface PaymentOrder { orderId: string; amount: number; } export interface PaymentResponse { success: boolean; message: string; } export interface OrderServiceClient { payOrder(paymentOrder: PaymentOrder, callback: (error: grpc.ServiceError | null, response: PaymentResponse) => void): grpc.ClientUnaryCall; } ``` 2. 启动 gRPC 服务:在 midway 中,可以使用 @grpc/server 来启动 gRPC 服务。例如: ```typescript import { createServer } from '@midwayjs/grpc'; import { OrderService } from './order.service'; async function start() { const app = await createAppAsync<App>(); const server = await createServer({ protoPath: [path.join(__dirname, './order.proto')], packageName: 'order', serviceName: 'OrderService', handler: OrderService, }); await server.start(); } start(); ``` 3. 注册服务到 Consul:在 midway 中,可以使用 @midwayjs/service-registry-consul 来注册服务到 Consul。例如: ```typescript import { Configuration, App, Inject, Provide } from '@midwayjs/decorator'; import { ConsulServiceRegistry, ConsulServiceRegistryConfiguration } from '@midwayjs/service-registry-consul'; import { OrderService } from './order.service'; @Configuration({ imports: [ ConsulServiceRegistryConfiguration, ], }) export class RegistryConfiguration { @Inject() consulServiceRegistry: ConsulServiceRegistry; async onReady(app: App) { await this.consulServiceRegistry.register({ name: 'order-service', address: app.config.host, port: app.config.port, metadata: { framework: 'midway', version: app.config.version, }, tags: ['grpc', 'order-service'], }); } } ``` 4. 调用 gRPC 服务:在 midway 中,可以使用 @grpc/client 来调用 gRPC 服务。例如: ```typescript import { createClient } from '@midwayjs/grpc'; import { PaymentOrder, OrderServiceClient } from './order.proto'; async function payOrder(order: PaymentOrder) { const client = await createClient<OrderServiceClient>({ protoPath: [path.join(__dirname, './order.proto')], packageName: 'order', serviceName: 'OrderService', address: 'localhost:50051', // 服务地址,可以从 Consul 中获取 }); const result = await client.payOrder(order); console.log(result); } ``` 综上所述,midway 使用 gRPC 和 Consul 实现订单支付的流程大致如上所述。需要注意的是,具体的实现方式可能会因应用场景和需求的不同而有所差异,建议根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值