내 사이트에서 'Google로 로그인'을 어떻게 구현합니까?

내 사이트에서 'Google로 로그인'을 어떻게 구현합니까?

---

내 사이트에서 사용자가 Google 계정으로 로그인하도록 허용하고 싶습니다. openid를 사용할 계획이지만 더 많은 이점이 있으므로 Google로 로그인을 허용하고 싶습니다. 나는 과거에 구글 (gmail) 계정과 IIRC로 로그인 할 수있는 몇 개의 사이트가 openID를 지원하지 않지만 (하지만 내가 틀렸을 수 있음) 발견했다.

'Google로 로그인'을 어떻게 구현합니까?

---

OpenID를 사용할 계획이라면 그것을 사용하십시오. Google은 이미 OpenID 2.0 제공 업체입니다.

Google의 OpenID 제공 업체는 https://www.google.com/accounts/o8/ud에 있습니다.

(참고 : 브라우저에서 해당 URI를 방문 할 필요는 없지만 OpenID에서는 작동합니다.)

이는 주로 계정 API 페이지에서 해결되며 OAuth 및 하이브리드 및 독점 로그인 시스템도 해결합니다. 사이트에 따라 내부적으로 인증을 위해 OpenID를 사용하는 OpenSocial 컨테이너 인 Google 프렌즈 를 사용할 수도 있습니다 .

물론 저는 해당 프로젝트의 DPE이기 때문에 Google 프렌즈에 편향되어 있지만 소셜 그래프와 관련된 작업을 수행하지 않는 한 OpenID 제공 업체를 직접 사용하는 것이 더 좋습니다.

2012 년 수정 : 로그인에 OAuth 2.0 을 사용하려고합니다 . GFC가 종료됩니다 .

---

사람들이 사이트에 로그인하는 데 사용할 ID 공급자를 선택할 수있는 올인원 솔루션 인 RPX에 관심이있을 수 있습니다 . Google 및 OpenID뿐만 아니라 다른 많은 기능도 지원됩니다.

RPX는 각 ID 공급자와의 인터페이스 세부 사항을 모두 처리하고 작업 할 공통 API를 제공합니다.

---

웹 앱에 Google 로그인 통합

Google Developers Console 프로젝트와 클라이언트 ID를 만듭니다.

Google Platform 라이브러리로드

Google 로그인을 통합하는 웹 페이지에 Google Platform 라이브러리를 포함해야합니다.

<script src="https://apis.google.com/js/platform.js" async defer></script>

앱의 클라이언트 ID 지정

google-signin-client_id 메타 요소를 사용하여 Google Developers Console에서 앱용으로 만든 클라이언트 ID를 지정합니다.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

참고 : gapi.auth2.init () 메서드의 client_id 매개 변수를 사용하여 앱의 클라이언트 ID를 지정할 수도 있습니다.

Google 로그인 버튼 추가

사이트에 Google 로그인 버튼을 추가하는 가장 쉬운 방법은 자동으로 렌더링 된 로그인 버튼을 사용하는 것입니다. 몇 줄의 코드만으로 사용자의 로그인 상태와 요청한 범위에 적합한 텍스트, 로고 및 색상을 갖도록 자동으로 구성되는 버튼을 추가 할 수 있습니다.

기본 설정을 사용하는 Google 로그인 버튼을 만들려면 로그인 페이지에 클래스 g-signin2가있는 div 요소를 추가하세요.

<div class="g-signin2" data-onsuccess="onSignIn"></div>

기타 정보. 여기 에서 찾을 수 있습니다

---

다른 가능한 해결책은

OAuth 2.0을 사용하여 Google API에 액세스

인증 프로토콜

OAuth 2.0 개요

OpenID 연결

서버 측 웹 앱용 OAuth 2.0

JavaScript 웹 앱용 OAuth 2.0

모바일 및 데스크톱 앱용 OAuth 2.0

---

찾고 계신 것이 Google 계정 API 라고 생각 합니다 .

---

원하는 것은 Google 프렌즈 라고 생각 합니다.

편집 : 더 이상 사용되지 않으므로 더 이상하지 않습니다.

---

하지만 Google로 로그인을 허용하고 싶습니다.

이 경우 다음 코드를 추가하십시오

HTML

 <div id="mySignin" onclick="login()"><img src="google_image_here.png" alt="google" style="cursor:pointer;height: 60px;width: 309px;"/></div>

JS

        <script type="text/javascript">
        function login() 
        {
          var myParams = {
            'clientid' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
            'cookiepolicy' : 'single_host_origin',
            'callback' : 'loginCallback',
            'approvalprompt':'force',
            'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
          };
          gapi.auth.signIn(myParams);
        }

        function loginCallback(result)
        {
            if(result['status']['signed_in'])
            {
                var request = gapi.client.plus.people.get(
                {
                    'userId': 'me'
                });
                request.execute(function (resp)
                {
                    /* console.log(resp);
                    console.log(resp['id']); */
                    var email = '';
                    if(resp['emails'])
                    {
                        for(i = 0; i < resp['emails'].length; i++)
                        {
                            if(resp['emails'][i]['type'] == 'account')
                            {
                                email = resp['emails'][i]['value'];//here is required email id
                            }
                        }
                    }
                   var usersname = resp['displayName'];//required name
                });
            }
        }
        function onLoadCallback()
        {
            gapi.client.setApiKey('YOUR_API_KEY');
            gapi.client.load('plus', 'v1',function(){});
        }

            </script>

        <script type="text/javascript">
              (function() {
               var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
               po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
             })();
        </script>

---

SO가 사용하고 Google에서 지원하는 openId ( http://openid.net/ )를 살펴볼 수 있습니다 .

참조 URL : https://stackoverflow.com/questions/1527947/how-do-i-implement-sign-in-with-google-on-my-site