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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL テーブル内の重複データを検索して削除する方法の概要
>>: CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法
目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...
サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...
アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...
導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...
mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...
この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...
この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...
メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...
問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...
目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...
以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...
Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...
結合クエリ結合クエリとは、2 つ以上のテーブル間のマッチング クエリを指し、一般的には水平操作と呼ば...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...