Vue.js 2.0 OAuth2.0ベースのサードパーティログインコンポーネント

サードパーティのログインは、一般的なログイン方法で、登録不要で安全で便利です。

この記事では、サイトにサードパーティのログインモジュールを追加する方法を示すための例として、Githubを取り上げます。

OAuth2.0

OAuth(Open Authorization)は、ユーザーがサードパーティのアプリケーションにユーザー名とパスワードを第三者に提供することなくWebサイトに保存するプライベートリソース(写真、ビデオ、連絡先リストなど)にアクセスできるようにするオープンスタンダードです。アプリケーション。

OAuth2.0訪問の詳細についてはOAuthOAuth 2.0の

実際の使用は知っている必要があります:

  1. プロバイダは、ユーザの情報、ID、名前、電子メールなどを格納する。
  2. クライアントは、トークンを取得するためにプロバイダが指定したページからリクエストを開始します。
  3. クライアントは、トークンを介してユーザー情報を取得します。

ギター

認証プロセスの詳細については、公式ドキュメントをご覧くださいOAuthのアプリの許可のオプション私は総括する認証要求を処理するために、一般的なWebアプリケーションを実行します。

GIthubの具体的な認証プロセス:

  1. ユーザーはログインボタンをクリックしてGithubが提供する認証インターフェースにジャンプし、クライアントID(後述)、コールバックページなどのパラメータを提供します。

    GET https://github.com/login/oauth/authorize

    パラメータ:

    名前 タイプ 説明
    client_id string 必須。 GitHubクライアントID。
    redirect_uri string コールバックアドレス。デフォルトでは、アプリケーション時に設定されたコールバックアドレスが返されます。
    scope string スペース区切り認可のリスト 。 EG: user repo両方のデフォルトのリターンを提供していません。
    state string クライアントによって提供されるランダムな文字列。 これは、サイト間の要求偽装攻撃を防止するために使用されます。
    allow_signup string ユーザーが登録に関連する情報を提供するかどうか、Githubに登録されていない場合、デフォルトはtrue
  2. 確認の後、ページは以前に提供されたコールバックページにジャンプし、URLに関連するパラメータ(コードと状態)が含まれます。
  3. クライアントはPOSTモードでGIthubが提供するアドレスにアクセスし、パラメータコードなどを提供します。

    POST https://github.com/login/oauth/access_token

    パラメータ:

    名前 タイプ 説明
    client_id string 必須。 GitHubクライアントID。
    client_secret string 必須。 Githubが提供するランダムな文字列。
    code string 必須。 前の受信code
    redirect_uri string 前に提供redirect_uri
    state string 提供する前state
  4. Githubはアクセス記録を含むデータを返します。 Jsonは、異なるAcceptヘッダーに従って異なる形式を返すために推奨されています。

    Accept: application/json
    {"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"}
  5. クライアントは、GETモードでGithubが提供するアドレスにアクセスし、ヘッダーにaccesstokenを追加または追加します。

    GET https://api.github.com/user?access_token=...

    curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com/user
  6. Githubはユーザーのjsonデータを返します。

ほとんどのサードパーティログインは、Githubの認証方法を参照しています。

Vue.js

、言うまでもなくVue.jsを 。 ここでは、主にサードパーティのログインコンポーネントの設計プロセスを要約します。

成分

一例として、ブログシステムを取る、それは3つのカテゴリに分けることができます:

  1. ホームページ、すべてのコンポーネントの親。
  2. 認証コンポーネントは、少なくともログインおよびログアウトイベントを呼び起こすために、切り離される必要があります。
  3. 認証を必要とするその他のコンポーネント。

認証コンポーネント(認証)

コンポーネントの機能は以下のように要約できます。

  1. ステータスがログインしていない場合はログインボタンが表示され、ステータスがログインしている場合はログアウトボタンが表示されます。
  2. ログインボタンをクリックすると、ページがジャンプします。
  3. アドレスバーかどうかを監視するcodeと、正しいstate表示されます。 認証の開始が発生した場合
  4. 認証により、ログインイベントが正常に呼び出され、ユーザー情報が渡されます。
  5. ユーザーはログアウトをクリックしてログアウトイベントを呼び起こします。

対価とのAuth2.0のためのより包括的な、便利な特性accesstoken安心しないで着地とパスワード開示を一定の期間を達成するためにクッキーに保存することができます。 ユーザーが正常に認証され、ログアウトすると、応答を設定してクリアする必要があります。

だから、最も重要なコンポーネントの始まったauth書かれました

まず準備作業の、訪問のGithubを- >設定- >開発者の設定はのOauthアプリケーションを作成するための情報を記入してください。

注意:ここで設定したAuthorization callback URLページのコールバッククライアントです。 クライアントアプリケーションによって搬送されるパラメータがこのアドレスと異なる場合、対応するエラーが報告されます。

クライアント情報は、後に得ることができるauthアセンブリフィールド内に設けられました。

" @/components/GithubAuth.vue "
data () {
    return {
      client_id: 'your client ID',
      client_secret: 'your client secret',
      scope: 'read:user', // Grants access to read a user's profile data.
      state: 'your state',
      getCodeURL: 'https://github.com/login/oauth/authorize',
      getAccessTokenURL: '/github/login/oauth/access_token', 
      getUserURl: 'https://api.github.com/user',
      redirectURL: null,
      code: null,
      accessToken: null,
      signState: false
    }
  }

テンプレートにログインボタンを追加し、以前のアドレスをクッキーに保存してログインし、コールバックし、認証ページにジャンプします。

<a v-if="!signState" href="#" v-on:click="saveURL">登录</a>

saveURL: function () {
      if (Query.parse(location.search).state !== this.state) {
        this.$cookie.set('redirectURL', location.href, 1)
        location.href = this.getCodeURL
      }
    }

クッキーAを操作するためのVue.jsプラグイン- 。 VUE-クッキー

文字列化と解析のURL – 。 クエリ文字列

コンポーネントが作成された後に有効がある場合は、アドレスバーを確認するcode 。 それに応じてそこに扱われている場合は、有効な取得accesstokenアドレスを保存するためにログインする前に、ページへの引き戻しを保存されたクッキーを。 何もチェックがない場合は、クッキーの中に存在するかどうかaccesstoken情報ユーザーへのアクセス。

注意:あなたは確か計算された属性必要があるcomputedの定義の下に。

computed: {
    formatCodeURL: function () {
      return this.getCodeURL + ('?' + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
    }
  }

 created: function () {
    this.getCode()
    // when code in url
    if (this.code) this.getAccessToken()
    else {
      // if no code in top, get accessToken from cookie
      this.accessToken = this.$cookie.get('accessToken')
      if (this.accessToken) this.getUser()
    }
  }

搬送アドレスバー取得codeプロセスのパラメータを: getCode()

getCode: function () {
      this.getCodeURL += ('?' + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
      let parse = Query.parse(location.search)
      if (parse.state === this.state) {
        this.code = parse.code
      }
    }

使用code取得accesstokenプロセス: getAccessToken()

getAccessToken: function () {
      this.axios.post(this.getAccessTokenURL, {
        client_id: this.client_id,
        client_secret: this.client_secret,
        code: this.code,
        state: this.state
      }).then((response) => {
        this.accessToken = response.data.access_token
        if (this.accessToken) {
          // save to cookie 30 days
          this.$cookie.set('accessToken', this.accessToken, 30)
          this.redirectURL = this.$cookie.get('redirectURL')
          if (this.redirectURL) {
            location.href = this.redirectURL
          }
        }
      })
    }

VuejsにAxios Aを統合するための小型のラッパー- 。 VUE-Axios

それを言うには、アキシャスは約束に基づいた非同期操作なので、それを使用するときは特に注意する必要があります。 約束が返っていないときにページがジャンプするのを防ぐために、ページジャンプはコールバック関数に置かれます。

重要:含むajaxfetchクロスドメインの問題など、バックグラウンドリソースに提出操作は、存在しています。 ブラウザの生成元ポリシーと回避策(ルアンYifeng) 。 vue-cliを使用する場合、クロスドメインの問題を避けるために、設定ファイルによってプロキシを一時的に設定することができます。 運用環境では、サーバープロキシを別のドメイン名に構成する必要があります。

" $/config/index.js "
proxyTable: {
      '/github': {
        target: 'https://github.com',
        changeOrigin: true,
        pathRewrite: {
            '^/github': '/'
        }
    }

/github 、要求を開始するために解決されるtarget 。 割り込み熱過負荷再コンパイルを設定した後 再コンパイル 再コンパイルします。

使用accesstoken取得したユーザ情報の処理: getUser()

getUser: function () {
      this.axios.get(this.getUserURl + '?access_token=' + this.accessToken)
        .then((response) => {
          let data = response.data
          this.signState = true
          // call parent login event
          this.$emit('loginEvent', {
            login: data.login,
            avatar: data.avatar_url,
            name: data.name
          })
        })
        // invaild accessToken
        .catch((error) => {
          console.log(error)
          this.$cookie.delete('accessToken')
        })
    }

ユーザ情報を要求した後に正常にトリガloginEventパラメータなどの情報を渡すためにイベントと現在のユーザーを。

取り扱いユーザーのログアウト: logout()

<a v-else v-on:click="logout" href="#">注销</a>

logout: function () {
      this.$cookie.delete('accessToken')
      this.signState = false
      this.$emit('logoutEvent')
    }

クッキーをクリーンアップし、ユーザーがイベントからログアウトするようにトリガーします。

ホームページ(アプリ)

authコンポーネントを導入し、サブコンポーネントとして登録します。

import GithubAuth from '@/components/GithubAuth'
Vue.component('auth', GithubAuth)

サブコンポーネントトリガーイベントの後にハンドラーを設定する

<auth v-on:loginEvent="login"v-on:logoutEvent="logout"></auth>

methods: {
    login: function (user) {
      this.user = user
    },
    logout: function () {
      this.user = null
    }
  }

ユーザーを待っている空のフィールドを初期化した後authイベントを呼び起こす、ユーザフィールドの値を変更します。

data () {
    return {
      user: null
    }
  }

その他のコンポーネント

Vue.js応答タイプので、 propsユーザ・フィールドが提供され、それは、初期化時に渡すことができます。

<router-view v-bind:user="user"></router-view>

props: ['user']

結論

これらは私が個人的にまとめた方法のほんの一部ですが、より良い解決策や間違った場所があれば、感謝しています。

元のリンク