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 メタデータが含まれています」の解決方法

推薦する

RHCE ブリッジング、パスワード不要のログイン、ポート番号の変更の概要

目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...

CentOSはexpectを使用してスクリプトやコマンドをバッチでリモート実行します

サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

Nginx がサーバーの生存状態をパッシブにチェックする詳細な説明

導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...

Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

デジタル時計効果を実現するJavaScript

この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...

Vue: メモリリークの詳細な説明

メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

Dockerでnginxをデプロイし、設定ファイルを変更する方法

Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...

MySQL 接続とコレクションの簡単な分析

結合クエリ結合クエリとは、2 つ以上のテーブル間のマッチング クエリを指し、一般的には水平操作と呼ば...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Vue プロジェクトで addRoutes を使用する際の問題の解決策

目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...