京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 9504|回复: 0

vue实现GitHub的第三方授权方法示例

[复制链接]

23

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2021-11-12 08:26:21 | 显示全部楼层 |阅读模式 来自 中国
目录
! m5 V% r, e* v  u
4 u% B3 N% k$ F( o$ o% j- V2 t( q
    . Q3 H5 L% y3 p, L% o
  • 创建OAuth Apps
    7 Z; k* m! ^- P0 `% E
  • 获取code& m& ~; \; B, `! L
  • 获取access_token
    % w& q8 ^+ B, G: L2 a1 l# C0 H7 m& r
  • 获取用户信息
    " f8 Q) q. k  H7 t
最近在完善我的博客系统,突然想到从原本临时填写 name + email 进行评论改成使用GitHub授权登陆以发表评论。
, a* r2 y" X# Y! H& }废话不多说,直接奔入主题
# V& n+ N! j- g% f3 i. b温馨提示:本文章只满足个人使用需求,如果需要学习更详细的使用方法,可访问 OAuth官方文档。: R$ a) _3 _1 _( Z
( M# g* }$ D4 e7 P/ [
创建OAuth Apps
/ V* Q9 Q! K% o
3 g( e# e' g6 c1 ?3 v

: \  c3 b$ {+ _  O首先,你需要一个GitHub账户然后前往GitHub developers,根据要求填写完成之后,会自动生成Client_ID和Client Secret,在之后的步骤中会用到。
1 i& ^8 `! r5 A9 `3 ]2 e. V( v, p9 Y: J; ?* F+ A/ R: y
$ V% J* d4 w2 E* p
获取code% v: y1 l. K+ O3 U( g0 Y5 J
8 \: w# I# L' E2 z' Y/ r
  1. //methodasync githubLogin() { windows.location.href =     "https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri"}
复制代码
  1. [url=https://github.com/login/oauth/authorize?client_id = your_client_id&redirect_uri=your_redirect_uri]GitHub登陆[/url]
复制代码
路由参数中redirect_uri是可选的。如果省略,则GitHub将重定向到你在OAuth apps配置的回调路径。如果提供,则你所填写的redirect_uri必须是你在OAuth apps中配置的回调路径的子路径。如下:- {- J% z4 B+ |8 l& `& v. d

4 i! G  K) t7 ?8 G) U' ]7 lCALLBACK: http://xx.com/github
# k% F: N6 F) z1 X! EGOOD: http://xx.com/github) P5 q6 e; S9 s8 {- r0 g
GOOD: http://xx.com/github/path/path' {* j6 g; Y: `" N6 A) e+ u% K
BAD: http://xx.com/git- p$ i# ^1 ~3 `5 s. r
BAD: http://xxxxx.com/path
+ s8 @% d7 o  Z如果用户接受你的请求,将会跳转到redirect_uri,我们可以接受路由中的参数code,以进行下一步操作。+ O, ^1 [- u( E3 x$ A. @) h
  1. your_redirect_uri?code=xxx
复制代码
获取access_token0 z& a+ t# E' a" o9 r2 g; h
1 C* K+ y- m+ b! P6 @7 A
& c4 i7 O- {) n/ z
我们需要client_id、client_secret和code来获取access_token。$ c9 f& I6 U, ?, p2 R- S' N
  1. /*/githubAccessToken:https://github.com/login/oauth/access_token*/this.$axios .get('/githubAccessToken',{ params: {  client_id: your_client_id,  client_secret: your_client_secret,  code: your_code  } })
复制代码
默认情况下,你会获取如下响应:
. V- m$ w- p% R
  1. access_token=xxxxx&token_type=bearer
复制代码
如果你想用更方便的格式接收响应,你可以在headers中自定义Accept:
/ y1 s7 O8 ]& m0 s! ^3 t1 n
  1. Accept: "application/json"=> {"access_token":xxxxx,"token_type":bearer}
复制代码
获取用户信息
& ~  s6 D* r  g8 l9 ]  N! g3 _

/ B( n3 b5 T& r/ k' k# ~6 F/ {+ @0 G7 k! h9 w7 H
获取access_token之后,我们就可以请求用户的部分信息了:. W9 Q2 Z; m: B4 j
  1. /*/githubUserInfo:https://api.github.com/user*/this.$axios .get('/githubUserInfo', {  headers: {    "Content-Type": "application/x-www-form-urlencoded",    Accept: "application/json",    Authorization: `token ${access_token}` //必填  }})
复制代码
然后你便可以获取到用户信息了。
$ [7 k: D# U2 Y到此这篇关于vue实现GitHub的第三方授权的文章就介绍到这了,更多相关vue实现GitHub的第三方授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 
: |" L3 ^. V" B9 t) l* X, Q
3 f% c& O6 K# y( H+ m0 r! W来源:http://www.jb51.net/article/227114.htm
6 p9 C7 B) N3 f) y免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2026-6-22 20:08 , Processed in 0.094154 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表