think-space-oauth v0.0.5
Github Oauth Login
介绍
静态页面，获取 github token,使用 github 的 api。
使用方法
// 默认设置
let authorizeUrl = "https://github.com/login/oauth/authorize";
let accessTokenUrl = "https://github.com/login/oauth/access_token";
let client_id = "6d1f0f1a67b21e729050";
let client_secret = "22cbbe70c70edb70097236f0b8e51c46b8ac460e";
let proxyUrl = "http://xiongxiao.me:9101/";
const options = {
authorizeUrl,
accessTokenUrl,
client_id,
client_secret,
proxyUrl,
};
GithubToken().auto().then(console.log);api 接口
函数 login
跳转 github 登录界面
函数 isNext
判断是否有 code，是否执行下一步
函数 next
执行下一步，发送 code，获取 access_token
函数 getToken
获取保存的 token
函数 hasToken
判断是否拥有 token
函数 logout
移除保存的 token
函数 auto
自动化操作-自动化流程
- 是否存在 token,存在则返回
- 自动 login，判断是否是下一步，不是就跳转
https://github.com/login/oauth/authorize获取 code - 存在 code，则发送 code 获取 access_token
- 得到保存 token，返回 token
原理
第一步: Get 请求https://github.com/login/oauth/authorize，发送 clinet_id,获取 code
第二步：Post 请求https://github.com/login/oauth/access_token,发送 client_id,client_secret,code 获取 access_token
Post 请求，进行设置代理，因为获取 access_token 不能跨域，代理的方法是 cros_anywhere.
使用介绍
使用我自己的开发配置;
应用：xx-space-local-dev
client_id: 6d1f0f1a67b21e729050
client_secret: 22cbbe70c70edb70097236f0b8e51c46b8ac460e
callback_url: http://localhost:3000/login_callback
proxyUrl: "http://message.xiongxiao.me/cors/"
queryUrl: "http://message.xiongxiao.me/api/gitThinkToken"
client_id,client_secret,callback_url 是配置 github 应用获取得到的。
proxyUrl 是 cros_anywhere 的地址 queryUrl 是自己开发的后端小 demo（保护 client_secret,当配置中的 client_secret 不存在，使用服务器上面的)
<body>
<h1>测试cors-where登录github</h1>
<button onclick="login()">登录</button>
<button onclick="postCode()">提交code</button>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script type="module">
import GithubToken from "think-space-oauth";
GithubToken().logout();
function login() {
// console.log("login",GithubToken);
GithubToken().auto().then(console.log);
}
function postCode() {
let a = GithubToken().auto();
a.then(console.log);
}
window.login = login;
window.postCode = postCode;
</script>
</body>程序介绍
export interface GithubTokenOptions {
authorizeUrl?: string;
accessTokenUrl?: string;
client_id?: string;
client_secret?: string;
proxyUrl?: string;
queryUrl?: string;
useQueryUrl?: boolean;
}
export interface GithubTokenValue {
login: () => any;
isNext: () => any;
next: () => any;
getToken: () => any;
logout: () => any;
auto: () => Promise<any>;
}
declare const GithubToken: (
githubToenOptions?: GithubTokenOptions
) => GithubTokenValue;auto 的主要功能是判断当前状态，是否 login（第一步），还是 next（第二步），根据状态获取数据。logout 删除数据
获取到的 token 放在 localStorage 当中的。
当 client_secret 不存在或者设置了 useQueryUrl=true，会请求 queryUrl 进行后台获取 token,后端代码如 koa 例子；
代理请求数据
因为第二步，请求的数据需要代理，因此，使用了 cros_where 的库。我的代理的 url 是：http://message.xiongxiao.me/cors/
github app，个人不喜欢暴露出来，所以我自己的部分，为了获取 token，写了一个小后端，然后可以自己后端处理请求 token。
url:http://**/gitThinkToken?code=**&client_id=**&client_secret=**
代码简介在 koa 例子当中
使用 think-space-token 例子
example 当中
koa 例子
运行 koa-example 代码
code 通过 example 的例子拿取到 code,替换下面链接的CODE;或者使用类似请求https://github.com/login/oauth/authorize?client_id=6d1f0f1a67b21e729050得到 code;
会返回类似结果：
access_token=72a4211d4107a9ad480b3b727db1589dddf541dc&scope=&token_type=bearerimport Koa from "koa";
import Cors from "koa-cors";
import Router from "koa-router";
import got from "got";
const app = new Koa();
const router = new Router();
router.get("/gitThinkToken", async (ctx: any) => {
const query = ctx.query;
const client_id = query.client_id;
const code = query.code;
let client_secret = query.client_secret;
const url = query.url ?? "https://github.com/login/oauth/access_token";
const searchParams: any = new URLSearchParams([
["client_id", client_id],
["client_secret", client_secret],
["code", code],
]);
const { body } = await got(url, {
searchParams,
});
ctx.body = body;
});
app.use(Cors());
app.use(router.routes());
const port = 3001;
app.listen(port, () => {
console.log("server is running on", port);
});