Vue で Google サードパーティ ログインを実装するためのサンプル コード

Vue で Google サードパーティ ログインを実装するためのサンプル コード

1. 開発者プラットフォームの構成

1. 開発者プラットフォームに入り、Google API コンソールに移動してプロジェクトを選択または作成します。

Google デベロッパー プラットフォーム

ここに画像の説明を挿入

魅力的なAPIが多すぎて選ぶのが難しいですが、今回の目的はソーシャルAPIだということを覚えておいてください。

ここに画像の説明を挿入

2. このAPIを使用する前に、OAuth 2.0クライアントIDを申請する必要があります。

ここに画像の説明を挿入

3 必要に応じてプロジェクトのタイプ、名前、ソースURLを入力します。

注: 作成が完了すると、申請したクライアント ID とキーを示すポップアップ ウィンドウがページに表示されます。はい、これは生成プロセスです。

ここに画像の説明を挿入

4. vue-google-signin-buttonをインストールする

npm をインストール vue-google-signin-button --save

5. main.jsにインポートして登録する

'vue-google-signin-button' から GSignInButton をインポートします。
Vue.use(GSignInButton);

6.index.htmlにjsファイルを導入する

<!--Google ログインには依存関係 js が必要です -->
<script src="//apis.google.com/js/api:client.js"></script>

7. login.vueでコンポーネントを使用する

<テンプレート>
  <g-サインインボタン
    :params="googleSignInParams"
    @success="サインイン成功"
    @error="onSignInError">
    Googleでログイン
  </g-サインインボタン>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ () {
    戻る {
      /**
       * Auth2パラメータは、
       * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
       * 少なくとも、有効な client_id が存在している必要があります。
       * @type {オブジェクト}
       */
      googleSignInParams: {
        クライアント ID: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
      }
    }
  },
  メソッド: {
    サインイン成功時(googleUser){
      コンソールログ(googleUser)
      const プロファイル = googleUser.getBasicProfile()
      console.log(プロファイル)
    },
    onSignInError (エラー) {
      console.log('ああ、だめだ', エラー)
    }
  }
}
</スクリプト>

<スタイル>
.g-サインインボタン{
  /* ここでボタンの外観を制御します。創造的に考えましょう! */
  表示: インラインブロック;
  パディング: 4px 8px;
  境界線の半径: 3px;
  背景色: #3c82f7;
  色: #fff;
  ボックスの影: 0 3px 0 #0f69ff;
}
</スタイル>

ここに画像の説明を挿入

問題を解決する

1. 問題1: 初期化ではjsが導入されない

初期化中にページにエラー メッセージが表示されます。


この問題の原因は、プラグイン自体が Google.js ファイルを導入していないことです。解決策は、Vue の index.html に導入することです。詳細については、下の図を参照してください。

Vue で Google サードパーティログインを実装するためのサンプルコードに関するこの記事はこれで終わりです。Vue Google サードパーティログインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js での Line サードパーティログイン API の実装コード

<<:  MySQL テーブル内の重複データを検索して削除する方法の概要

>>:  CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

推薦する

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

MYSQL から MARIADB へのプロジェクト移行に関するチュートリアル

データベース (MySQL) を準備します。すでに MySQL をお持ちの場合は、これを無視できます...

Linux でファイルを削除するさまざまな方法の効率の比較

Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...

MySQL インデックスが失敗するいくつかの状況の概要

1. インデックスはnull値を保存しないより正確に言うと、単一列インデックスには null 値は格...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

Vueカスタム命令の詳細な説明

目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...

Linux で PHP を 5.6 にアップグレードする実用的な方法

1: ターミナルに入ったらPHPのバージョンを確認する php -v出力は次のようになります。 PH...

純粋な CSS で DIV サスペンションを実装するサンプル コード (固定位置)

DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

nginxプロセスロックの実装の詳細な説明

目次1. nginxプロセスロックの役割2. エントリーレベルのロックの使用3. nginxプロセス...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

MySQL で最大接続数を正しく変更する 3 つの方法

MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...

js の parseInt() の奇妙な動作の調査と修正

背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...

Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する

債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...