欢迎各位兄弟 发布技术文章
这里的技术是共享的
项目文件见 github
oAuth 是一种验证身份用的东西,QQ,微博,微信这些平台都提供这种验证身份的方法,在你的应用里可以实施这些平台提供的 oAuth 功能,让你的用户可以使用他们在这些平台上的帐号登录授权。这个课程介绍一下 oAuth 的工作流程。
来自 https://ninghao.net/course/3193#info
很多平台都提供一些应用的接口,比如豆瓣,QQ,微博,微信 .. 使用这些接口我们可以去获取到这些平台提供的数据,或者也可以向这些平台去提交新的数据。
在使用这些接口的时候,很可能需要用户先授权一下,也就是使用我们应用的用户,需要使用它们在这些其它平台上的帐号去登录一下,这样在访问这些平台的 API 的时候,才会有权限。
比如用户想通过你的应用发布一条信息,你想让这条信息也出现在用户的微博里面,这就需要先让用户去登录并授权一下。这种登录授权的方式也挺多,在这个课程里我们要介绍的是使用 oAuth 2.0 的方式。 豆瓣,QQ,微博,微信这些平台都支持使用这种方式登录授权。
接下来我们会使用 douban 的 api 去演示一下使用 oAuth 登录授权的整个过程 ... 在以后我们会在自己创建的移动应用里,去具体的再实施一下这个功能 .. 不过在这之前理解 oAuth 的工作流程非常的重要。
来自 https://ninghao.net/video/3195#info
在使用 oAuth 登录的时候,需要用到 api 的 key 还有 secret 。 不管使用什么平台的 oAuth 功能, 我们都需要先去申请一下。
先打开 douban 的开发者网站,developers.douban.com .. 使用你的 douban 帐号登录一下 ..
然后打开,开发文档 .. 这里有一些 api 的使用资料 .. 打开边栏上的这个 了解 oAuth2.0, 在这里会有一些文字说明 ... 其它的平台也应该会提供一个类似的说明文档 ..
再打开 我的应用 .. 在这儿可以去申请开发一个应用 .. 我申请了一个应用,名字就是 宁皓网 .. 每个应用都会给你一个 API Key .. 还有一个 Secret ,密钥 .. 在我们自己的应用里,需要用到这些东西 ..
应用属性 .. 这里就是应用的一些相关的信息 .. 名字,描述,地址,还有应用的类型 ..
打开测试用户 .. 您提交的应用 douban 需要审核一下 .. 通过以后才能使用 API 里的一些权限 .. 在没通过之前,可以在这里添加一些可以测试这个应用的用户 .. 比如你想使用 douban 的登录用的 api , 在应用没通过审核之前,在这里添加的测试用户才能使用应用的登录功能 ..
这里我添加了两个测试用户,王皓,还有宁皓网 ..
API 权限 .. douban api 提供了一些权限,在这个地方,你可以审核使用需要的权限 .. 比如你想要使用 douban 的登录用的 api ,需要勾选一下 douban_basic_common ,就是这个 豆瓣公共 这个权限 .. 另外我还需要使用豆瓣电影里面提供的一些权限 ...
选择以后 .. 打开 提交审核 .. 在这里可以提交一下您审核的权限,一般需要等两天 .. 通过以后,这里会提示应用已经通过了审核 .. 可以正常使用 douban 的 api 了。
来自 https://ninghao.net/video/3196#info
使用 oAuth 登录有几个重要的步骤。先要得到用户的授权码,然后使用这个授权码去得到访问的令牌,这样每次访问需要授权的 API 的时候,带上这个得到的访问令牌就可以了。
首先我们要得到用户的授权,比如我们要使用豆瓣提供的 oAuth 功能,在我们自己的应用里,可以有一个使用豆瓣登录的按钮 .. 用户点击以后就会打开豆瓣提供的一个授权用的页面 ...
在这个页面上,用户可以授权我们使用它的信息,也可以拒绝 .. 用户如果授权的话,需要他输入自己在豆瓣网站上申请的用户还有密码 .. 然后点击授权 ..
这样用户又会被重定向到一个地址上,这个地址应该就是我们自己的服务端提供的一个地址 .. 在地址里面,会包含一个授权码 ...
我们可以使用这个授权码,再去请求得到一个访问的令牌,也就是 access token .. 有了它以后你可以使用它再去请求平台提供的其它的 API ,比如得到用户的相关的信息 .. 这样你就可以利用获取到的信息,你可以在自己的服务端根据这些信息去为用户创建一个新的帐号 ..
不管怎样,得到了这个访问令牌,就相当于是用户已经登录并授权了 .. 在访问需要授权才可以的 API 的时候,你需要带上这个访问令牌去请求 API 的地址 .. 比如得到用户的评论 .. 让用户发布新的评论等等 ...
来自 https://ninghao.net/video/3197#info
在正式使用代码实施 oAuth 之前,我们再用一些实际的操作去理解一下 oAuth 的整个过程。
现在我打开的是我们在 React Native 本地应用这个课程里创建的一个项目.. 在 App 这个目录的下面,有一个 oAuth-workflow.txt .. 这里是 oAuth 需要用到的一些信息的模板 ..
你可以在 github 上的宁皓网的 MovieTalk 这个仓库里面得到这个文件 ..
https://github.com/ninghao/MovieTalk
https://github.com/ninghao/MovieTalk/blob/master/app/oAuth-workflow-douban.txt
#准备 | |
* api key: | |
05b2e24806124f0f1118a6d81236ed2d | |
* secret: | |
132f022db4330578 | |
* auth 地址: | |
https://www.douban.com/service/auth2/auth | |
* token 地址: | |
https://www.douban.com/service/auth2/token | |
#实施 | |
##1 获取 authorization_code | |
方法:GET | |
地址: | |
https://www.douban.com/service/auth2/auth | |
?client_id=05b2e24806124f0f1118a6d81236ed2d | |
&redirect_uri=http://ninghao.net | |
&response_type=code | |
&scope=douban_basic_common,movie_basic,movie_basic_r,movie_basic_w | |
authorization_code: | |
11d874d017ece19e | |
##2 获取 access_token | |
方法:POST | |
地址: | |
https://www.douban.com/service/auth2/token | |
?client_id=05b2e24806124f0f1118a6d81236ed2d | |
&client_secret=132f022db4330578 | |
&redirect_uri=http://ninghao.net | |
&grant_type=authorization_code | |
&code=11d874d017ece19e | |
access_token: | |
{ | |
"access_token": "697cd8dbdcde26ba3c768a93969a742e", | |
"douban_user_name": "王皓", | |
"douban_user_id": "3652751", | |
"expires_in": 604800, | |
"refresh_token": "03f38229d6e2c9140bda867d84a85b3c" | |
} | |
##3 请求 API | |
地址: | |
https://api.douban.com/v2/user/~me | |
Header: | |
Authorization Bearer 697cd8dbdcde26ba3c768a93969a742e |
选中这个文件 .. 然后复制一份 ... 重命名一下 .. oauth-workflow-douban.txt ...
先打开 douban 的开发者网站 .. 登录以后,打开 我的应用 .. 找到我们申请的应用 .. 复制一下这个 api key .. 再把它粘贴到这个文本文件里面的 api key 的后面 ..
再去复制一下这个 Secret ... 然后把它粘贴到这个文件的 secret .. 它是 API 的密钥 .. 下面需要找到申请 authorization_code 用的基本的地址 .. 打开 开发文档 .. 在边栏上,找到了解 oAuth 2.0 ..
在这个获取 authorization_code 下面,有一个基本的地址 .. 它就是请求 authorization_code 用的地址 .. 在请求这个地址的时候,需要再添加一些参数 .. 比如 client_id ,它的值就是我们申请的 api 的 key,还有些其它的参数,一会儿再回来看一下 ..
先复制一下这个地址 .. 粘贴到这个文件的 auth 地址的后面 ..
再往下看 .. 这里还有一个 获取 access_token 用的基本的地址 .. 复制一下它 ... 粘贴到 token 地址的后面 ...
下面我们会利用这些东西,去请求 oAuth 需要的授权码,还有访问的令牌。
来自 https://ninghao.net/video/3199#info
下面我们要去准备一下获取 authorization_code 用的完整的地址 .. 先是请求的基本的地址 .. 复制一下 auth 地址 .. 粘贴过来 .. 然后是一些参数 .. 可以另起一行 .. 第一个参数的前面要加上一个 ? 号 ..
再添加一个参数的名字 .. client_id .. 等于 .. 这个 client_id 就是我们应用的 api key 的值 .. 在上面复制一下 .. 粘贴过来 .. 再另起一行 .. 去添加其它的参数 .. 连接这些参数可以使用 & 符号 ..
输入一个 redirect_uri .. 重定向的地址,它的值就是请求成功以后需要打开的地址 .. 在这个地址上面会带着请求回来的 authorization_code 的值 ... 这个地址应该是我们自己的服务端的地址 .. 如果你做的是服务端的应用,在这个重定向到的的地址里面可以得到从 douban 那里获取到的 authorization_code ..
我们要做的是一个移动端的应用 .. 所以这个重定向的地址不那么重要 .. 在后面我们会介绍怎么样在应用里得到返回的这个 authorization_code 的值 .. 这里先输入一个 http://ninghao.net ..
另起一行 .. 一个 & 符号连接一下 .. 再输入一个参数 .. response_type .. 响应的类型 .. 它的值可以是 code 也可以是 token ,在请求 authorization_code 的时候,它的值应该是 code ..
再添加一个 scope 参数 .. 另起一行 .. &scope .. 这个 scope 有点像是需要用的权限 .. 我们在申请 douban api 的时候,勾选了一些权限 .. 在这里你需要列出这些要使用的权限 ..
回到我们在 douban 申请的应用 .. 打开 api 权限 .. 登录最基本的权限就是这个 豆瓣公共 .. 这个权限的名字是 douban_basic_common .. 复制一下 .. 把它粘贴到 scope 的后面 .. 如果你想使用其它的权限,可以使用逗号分隔一下 ...
比如我在申请的时候勾选了豆瓣电影 .. 它里面有几个权限 ... 一个是 movie_basic ... 还有 movie_basic_r ,读取自己的电影信息,评论的功能,还有一个 movie_basic_w .. 写的功能 .. 可以发布,修改,删除自己的电影评论 ..
这样我们就准备好了申请 authorizaiton_code 用的地址 .. 我们可以把它们组织成一行 .. 选中这个地址 ... 复制一下 .. 粘贴到下面 .. Atom 编辑器里安装了 Emmet 插件以后,Mac 用户可以使用 command + shift + M 把多行合并成一行 .. 剪切一下 ...
打开浏览器 .. 粘贴到地址栏上 .. 这样会打开豆瓣的一个提示是否授权应用使用自己在 douban 上的信息的一个页面 .. 上面会出现想要使用授权的应用的名字 .. 我的应用的名字就是这个宁皓网 ...
下面会提示一个 授权 或者 拒绝 ... 因为我之前使用的是宁皓网这个用户登录里 .. 这里会出现我的用户 .. 如果想要使用其它的用户,可以点一下这个 切换 ..
这里再输入自己在 douban 上的帐户信息 .. 我的 douban 的用户名是 117663444@qq.com ..
再输入密码 ... 然后点击授权 ... 这样用户会被重定向到在请求 authorization_code 的地址里,为 redirect_uri 这个参数指定的那个地址 ..
在这个地址上,会包含一个 code 参数 .. 它的值就是我们向豆瓣申请回来的 authorization_code ... 复制一下 ...
回到这个文本文件 .. 把它粘贴到 code 这里 ... 下面我们要做的就是使用这个 code 去获取 access_token ...
来自 https://ninghao.net/video/3200#info
下面我们需要再去获取一个 access_token,得到它以后,每次请 api 发出请求的时候可以带着这个 access_token,这样就会有权限去做一些事情了 ..
先去组织一下请求的地址 .. 一开始是一个基本的请求地址 .. 复制一下 token 地址 .. 粘贴到这里 .. 然后需要再去用一些参数 .. 另起一行 .. 第一个参数前面加上一个 ? 号 .. 连接其它的参数可以使用 & 符号 .. 参数名与参数的值之间可以使用一个等号连接 ...
先是 client_id .. 它的值就是我们申请的 api 的 key .. 复制一下 .. 粘贴过来 .. 再起一行 .. 用一个 & 符号连接一下 .. 然后是参数名 .. 再输入一个 client_secret .. 它的值是我们申请的 api 的 secret .. 在上面找到这个 secret 的值 .. 复制 .. 再把它粘贴到这个 client_secret 参数的后面 ..
另起一行,再用一个 redirect_uri,它的值就是获取成功以后重定向到的那个地址 .. 这里先用一个 http://ninghao.net ..
再添加一个 grant_type 参数 ... &grant_type 。它的值可以是 authorization_code ,也可以是 refresh_token .. 我们要去申请新的 access_token ,所以这个参数的值应该是 authorization_code,如果申请的 access_token 过期了 .. 可以使用 refresh_token ,去刷新一下 ...
最后,再用一个 code 参数,这个参数的值就是我们在上一个视频里从豆瓣那里获取到的 authorization_code ... 复制一下这个 code 的值 .. 再把它粘贴到这个参数的后面 ..
这样我们就准备了获取 access_token 用的地址 .. 请求这个地址需要使用 POST 这个方法 ... 先把这个地址组织成一行 ... 复制一下 .. 粘贴 ... command + shift + M .. 可以合并多行 .. 这是 Emmet 插件提供的一个小功能 .. 剪切一下这个地址 ..
然后我们再用 POSTMAN 这个小工具,去请求一下组织好的这个地址 .. 打开 POSTMAN ...
把要请求的地址粘贴到这里 ... 然后请求的方法,可以选择 POST ... 默认用的是 GET 这个方法 .. 打开这个下拉菜单 .. 选择 POST ..
打开 Body 这个标签 ... 这里选择 x-www-form-urlencoded .. 这样服务端可以正确的解析在 url 上面添加的这些参数,还有对应的值 ...
点击 Send ... 发送请求 ... 服务端收到请求以后,处理一下,没有问题就会给我们返回请求的结果 .. 在这里, access_token 这个属性的值,就是我们需要的 access_token ...
另外这里还有一些其它的信息, 比如 douban_user_name ,就是授权应用使用自己 douban 信息的那个用户的名字 .. 还有 douban_user_id ,是这个用户的 id 号 ... expires_in 是过期的时间 ... 下面的 refresh_token 是刷新 access_token 用的东西 ...
复制一下这个请求回来的结果 ... 把它粘贴到这个文本文件里面 ... 下面我们就可以使用这个请求回来的 access_token ,去请求一些其它的 api ,得到自己需要的数据。
来自 https://ninghao.net/video/3201#info
下面我们可以使用前面获取到的 access_token 去请求其它的一些 api 。先打开 douban 的开发者网站 .. developers.douban.com ,找到 开发文档 这个菜单项 ...
打开边栏上的 豆瓣 API v2 .. 在页面的底部会列出一些可以使用的 API .. 打开 用户Api ..
这里我们可以使用获取当前登录的用户的这个 API .. 这个 API 的请求地址就是 https://api.douban.com/v2/user/~me
在这个 API 的描述里面,指出了,使用它需要先进行 API 认证授权 .. 这个认证授权就是我们在之前的视频里做的 ..
先复制一下这个地址 ... 粘贴到这个文本文件里面 ... 在请求这个地址的时候,我们需要添加一个额外的 header 信息,名字就是 Authorization .. 它的值是 Bearer .. 后面加上获取到的 access token 的值 ..
我们还是在 POSTMAN 这个工具里面去试一下 .. 复制一下需要请求的这个 API 的地址 ...
打开 POSTMAN .. 把请求的地址粘贴到这里 .. 请求的方法选择 GET ...
因为这个 API 需要授权,所以要给它添加一个 Authorization 的 Header ... 打开这里的 Headers 标签 .. 左边输入 header 的名字 .. 这里就是 Authorization ...
右边儿是它的具体的值 ... 先输入一个 Bearer 空格 .. 接着是我们之前获取到的 access_token ... 回到这个文本文件 .. 找到这个 access_token 的值 .. 复制一下 .. 回到 POSTMAN .. 把它再粘贴到这里 ..
然后点击 Send .. 发送这个请求 ...
下面会显示出服务端,也就是 douban 的这个 api 返回来的结果 ... 这里就是之前授权应用使用自己在 douban 上的信息的那个用户的相关的信息 .. 也就是当前登录的这个用户 ..
里面有用户的名字 .. 创建的日期 .. 所在的位置 ... 头像的地址 ... 用户的 id ,还有个人描述等等 ...
在请求其它的需要授权才能访问的 API,你就可以使用这种方法,也就是在请求里面,加上一个 Authorization 的 header ,这个 header 的值就是 Bearer 空格,加上获取到的 access_token 的值。
来自 https://ninghao.net/video/3202#info