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

很多人都使用过基于OAuth的API,比如你在一些网站使用GitHub登录的时候,你就使用GitHub提高的OAuth2 API,或者你使用Google或者Facebook登录的时候,你也会使用到它。

现在OAuth真的无处不在,也许因为它真的非常好,用户只要点一个按钮,然后得到权限,这样就可以了。

但是当我们进行开发它的时候,就是另外 一个故事了,也许是因为它一次性引入了太多的新的内容。本文我们会介绍一个小的工具Bearer.sh Pizzly,有了它之后开发OAuth就方便多了。

首先来看看它长什么样子:

HTM L 
var app 
css 
new 
Result 
o_sx 
EDIT ON 
CODEPEN 
el: "*app", 
data : 
user: null, 
repositories : 
mounted: function() { 
//' Here we initialize Pizzly. 
this .$pizzly = new 
host: 
"pushtogsheet . herokuapp . com", 
shabIeKey: "pope8Qy8qfYyppnHRMgLMpQ8MuElJKDGeyhfGCj" 
If you don't have an account on Bearer. sh 
// create one for free at https://www.bearer.sh/signup 
// then grab your Bearer Publishable key 
Connect to GitHub 
(pk_production.. 
methods: { 
connect: function() 
// that "connect" 
this . $pizzly 
. ) in the settings page. 
a user to GitHub 
o_2sx

下面我们来看看如何使用它。

Vue.js skeleton

为了学习如何使用基于OAuth的API,我们首先需要一个Vue.js skeleton,或者至少需要一个能使用OAuth2 API的应用。

假如你已经有了GitHub的账户,我们可以使用它的API,当然别的基于OAuth的API也是可以的。

GitHub API提供了一个端口(/user/starred)列出了用户的所有的repositories。这个端口是需要authentication的,所以听起来是一个很好的使用场景。

下面是一个简单的应用代码:

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <main v-if="user">
        <h1>Latest repositories starred</h1>
        <ul>
          <li v-for="repository in repositories">
            <a :href="repository.html_url" target="_blank">{{repository.name}}</a>
          </li>
        </ul>
        <p v-if="repositories.length === 0">Whoa, such empty!</p>
      </main>
      <div v-else>
        <button @click.prevent="connect">Connect to GitHub</button>
      </div>
    </div>
<!-- Pizzly.js -->
    <script src="https://cdn.jsdelivr.net/npm/pizzly-js@v0.2.7/dist/index.umd.min.js"></script>
<!-- Vue.js (developement) -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          user: null,
          repositories: []
        }
      })
    </script>
  </body>
</html>

这个应用代码是一个很简单的Vue.js,假如user变量已经设置了,就会显示repositories的内容个,否则就要求用户连接GitHub。

认证的部分

我们使用开源的Pizzly,它使用了.connect的方法来从前端触发认证。我们来看看如何在上面代码中加入这个内容:

var app = new Vue({
  el: "#app",
  data: {
    user: null,
    repositories: []
  },
  mounted: function() {
    // Here we initialize Pizzly.
    this.$pizzly = new Pizzly({
      host: "pushtogsheet.herokuapp.com",
      publishableKey: "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj"
    });
// I'm using my own instance of Pizzly which is hosted on Heroku.
    // Create yours for free and in a few clicks by following
    // https://github.com/Bearer/Pizzly#getting-started
  },
  methods: {
    connect: function() {
      // Here, we create a new method
      // that "connect" a user to GitHub
      this.$pizzly
        .integration('github')
        .connect()
        .then(this.connectSuccess)
        .catch(this.connectError);
    },
    connectSuccess: function(data) {
      // On success, we update the user object
      this.user = data.authId;
      console.log('Successfully logged in!')
    },
    connectError: function (err) {
      console.error(err)
      alert("Something went wrong. Look at the logs.")
    }
  }
});

是不是很简单,只要几行代码就完成了。

配置部分

在上面的代码中有一个最重要的部分就是Pizzly的初始化,这里就要提到Pizzly其实需要一个Oauth Manager,也就是说你需要把它托管在某一个地方,比如Heroku等。当这个托管完成之后,你就可以使用Pizzly的仪表板了,这也是你配置你的GitHub的地方:

总结

这样你就可以在Vue.js中使用任何基于OAuth的API了,关于任何Pizzly的意见,欢迎大家提出。

参考文章:https://hackernoon.com/connecting-vuejs-with-oauth-based-api-ks1v3ucj

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *