Top
Aplikacja www

Jak logować się do aplikacji poprzez Google?

Jak logować się do aplikacji poprzez Google?

Wspominałem w wcześniejszym wpisie tutaj, że zmieniłem koncepcję i logowanie w mojej aplikacji będzie odbywało się poprzez Google. Dziś początek implementacji tego rozwiązania.

Implementacja logowania poprzez Google

  1. Delikatnie zmieniłem plik “head.jsp“. Usunąłem z niego tag “title” oraz końcowy tag “head“. Było to podyktowany tym, że będę chciał w poszczególnych stronach jsp dodawać niezbędne biblioteki.
    Plik “head.jsp” wygląda teraz następująco:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  2. W pliku “web.xml” dodałem poniższą zawartość:
    <security-constraint>
    
    		<web-resource-collection>
    			<web-resource-name>Entire Application</web-resource-name>
    			<url-pattern>/*</url-pattern>
    		</web-resource-collection>
    
    		<user-data-constraint>
    			<transport-guarantee>CONFIDENTIAL</transport-guarantee>
    		</user-data-constraint>
    
    	</security-constraint>
  3. W pliku “pom.xml” dodałem zależność do biblioteki Google.
    <dependency>
    			<groupId>com.google.api-client</groupId>
    			<artifactId>google-api-client</artifactId>
    			<version>1.22.0</version>
    		</dependency>
  4. Aby logowanie przez Google było możliwe trzeba dodać odpowiednią bibliotekę oraz niezbędne tagi.Dodałem je w nagłówku już istniejącej strony “index.jsp“. Wyglądają następująco:
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id"
    content="Miejsce na CLIENT_ID z wcześniej stworzonego konta w Google Api Console">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  5. W plik “index.jsp” dodałem poniższe linijki kodu. Jest tam również odrobina JavaScript, którego za bardzo nie znam. Celem tego skryptu jest przesłanie tokena, który zostanie sprawdzony po stronie back-end i w ten sposób otrzymam dane dotyczące użytkownika.
    <div class="col-sm-4">
    <h2>Log in with Google</h2>
    <div class="g-signin2"   data-onsuccess="onSignIn"
    data-theme="dark"></div>endu
    <script>
    function onSignIn(googleUser) {
    var id_token = googleUser.getAuthResponse().id_token;
    console.log("ID Token: " + id_token);
                             ;
    </script>
    </div>

To tyle po stronie “Front-End”. Następny wpis to już przesłanie tokena do “Back-End” i uzyskanie informacji o użytkowniku.

Link do repozytorium (branch 28_04_2017):https://github.com/greendevmedia/DSP2017.git

Link do filmiku na youtube: https://youtu.be/xZFUA8IQ4h8

 
 

Portal greendev.in nie jest kolejnym standardowym portalem dla programistów. To strona dla ludzi spędzających większość dnia na krześle. Właśnie tutaj dowiesz się jak Twój umysł może wejść na wyższy poziom, a Ty po prostu czuć się lepiej i zdrowiej każdego dnia.

Strona zawiera informacje i przemyślenia autora które mogą nie być zgodne z korporacyjnymi zasadami oraz wytycznymi idealnych praktyk programowania. Jednak nauka programowania to próby, pomyłki i zbieranie doświadczenia z tych błędów. Autor rekomenduje własne refleksje i nie przyjmowanie przedstawianych koncepcji za jedyne słuszne.

Więcej informacji na temat strony znajdziesz tutaj http://www.greendev.in/o-stronie/.

Jeżeli tylko chcesz mnie lepiej poznać wpadnij na http://www.greendev.in/kim-jestem/.