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 メタデータが含まれています」の解決方法
MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...
概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...
データベース (MySQL) を準備します。すでに MySQL をお持ちの場合は、これを無視できます...
Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...
1. インデックスはnull値を保存しないより正確に言うと、単一列インデックスには null 値は格...
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...
1: ターミナルに入ったらPHPのバージョンを確認する php -v出力は次のようになります。 PH...
DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
目次1. nginxプロセスロックの役割2. エントリーレベルのロックの使用3. nginxプロセス...
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...
背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...
債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...