Tagged: vue.js

如何通过基于OAuth的API连接Vue.js 0

如何通过基于OAuth的API连接Vue.js

很多人都使用过基于OAuth的API,比如你在一些网站使用GitHub登录的时候,你就使用GitHub提高的OAuth2 API,或者你使用Google或者Facebook登录的时候,你也会使用到它。 现在OAuth真的无处不在,也许因为它真的非常好,用户只要点一个按钮,然后得到权限,这样就可以了。 但是当我们进行开发它的时候,就是另外 一个故事了,也许是因为它一次性引入了太多的新的内容。本文我们会介绍一个小的工具Bearer.sh Pizzly,有了它之后开发OAuth就方便多了。 首先来看看它长什么样子: 下面我们来看看如何使用它。 Vue.js skeleton 为了学习如何使用基于OAuth的API,我们首先需要一个Vue.js skeleton,或者至少需要一个能使用OAuth2 API的应用。 假如你已经有了GitHub的账户,我们可以使用它的API,当然别的基于OAuth的API也是可以的。 GitHub API提供了一个端口(/user/starred)列出了用户的所有的repositories。这个端口是需要authentication的,所以听起来是一个很好的使用场景。 下面是一个简单的应用代码: 这个应用代码是一个很简单的Vue.js,假如user变量已经设置了,就会显示repositories的内容个,否则就要求用户连接GitHub。 认证的部分 我们使用开源的Pizzly,它使用了.connect的方法来从前端触发认证。我们来看看如何在上面代码中加入这个内容: 是不是很简单,只要几行代码就完成了。 配置部分 在上面的代码中有一个最重要的部分就是Pizzly的初始化,这里就要提到Pizzly其实需要一个Oauth Manager,也就是说你需要把它托管在某一个地方,比如Heroku等。当这个托管完成之后,你就可以使用Pizzly的仪表板了,这也是你配置你的GitHub的地方: 总结 这样你就可以在Vue.js中使用任何基于OAuth的API了,关于任何Pizzly的意见,欢迎大家提出。 参考文章:https://hackernoon.com/connecting-vuejs-with-oauth-based-api-ks1v3ucj