In questo articolo creeremo una semplice applicazione sul nostro sistema locale che ci permetta di effettuare il login con Amazon, se si desidera approfondire l'argomento leggere la documentazione al seguente link
developer.amazon.com/docs/login-with-amazon/register-web.html
Come descritto nella documentazione, il primo step da eseguire per poter integrare il login con Amazon sul proprio sito web è quello di creare un Profilo di sicurezza (Security Profile), per fare ciò seguire passo passo la seguente documentazione
developer.amazon.com/docs/login-with-amazon/register-web.html#create-a-new-security-profile
Se hai seguito con attenzione gli step da eseguire per creare un Security Profile, allora avrai ottenuto un Client ID e un Client Secret, avrai impostato le Origini consentite (Allowed Origins) e gli URL di ritorno consentiti (Allowed Return URLs), nel mio caso poichè sto sviluppando un'applicazione in locale, le Origini consentite e l'URL di ritorno sono rispettivamente http://localhost:8080 e http://localhost:8080/return_url.php.
La mia applicazione di esempio è costituita da due file index.html e return_url.php entrambi nella root del progetto (LoginWithAMZ),
- LoginWithAMZ/
- index.html
- return_url.php
eseguiamo il seguente comando "php -S localhost:8080" da CLI nella root per avviare un server in locale e testare l'applicazione di esempio
$ php -S localhost:8080
PHP 7.2.13 Development Server started at Sun Apr 14 15:00:21 2024
Listening on http://localhost:8080
Document root is \path\LoginWithAMZ
Press Ctrl-C to quit.Questo è il file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example login with Amazon</title>
</head>
<body>
<div id="amazon-root"></div>
<!-- amazon-root -->
<!-- sdk javascript -->
<script type="text/javascript">
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('Your-Client-ID');
};
(function(d) {
var a = d.createElement('script');
a.type = 'text/javascript';
a.async = true;
a.id = 'amazon-login-sdk';
a.src = 'https://assets.loginwithamazon.com/sdk/na/login1.js';
d.getElementById('amazon-root').appendChild(a);
})(document);
</script>
<!-- sdk javascript -->
<a href id="LoginWithAmazon">
<img border="0" alt="Login with Amazon" src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png" width="156" height="32" />
</a>
<script type="text/javascript">
document.getElementById('LoginWithAmazon').onclick = function() {
options = {}
options.scope = 'profile';
options.scope_data = {
'profile': {
'essential': false
}
};
amazon.Login.authorize(options, 'http://localhost:8080/return_url.php');
return false;
};
</script>
</body>
</html>nella prima parte di questo file c'è l'elemento #amazon-root e l'sdk javascript, perchè l'accesso con SDK JavaScript richiede che tale elemento sia presente nella pagina, sostituiamo 'Your-Client-ID' col Client-ID ottenuto in precedenza quando abbiamo creato il Security Profile, nella seconda parte c'è il bottone e l'evento click che ci reindirizza alla pagina Amazon per poter effettuare il login, in particolare è possibile scegliere il bottone "login with Amazon" tra quelli disponibili al seguente link
developer.amazon.com/docs/login-with-amazon/button.html#website-images
il secondo parametro di amazon.Login.authorize è l'url di ritorno che abbiamo indicato prima nel Security Profile, nel mio caso è
http://localhost:8080/return_url.php.
Vediamo ora il file return_url.php
<?php
$access_token = $_GET['access_token'];
$c = curl_init('https://api.amazon.com/auth/o2/tokeninfo?access_token=' . urlencode($access_token));
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
$r = curl_exec($c);
curl_close($c);
$d = json_decode($r);
if ($d->aud != 'Your-Client-ID') {
header('HTTP/1.1 404 Not Found');
echo 'Page not found';
exit;
}
$c = curl_init('https://api.amazon.com/user/profile');
curl_setopt($c, CURLOPT_HTTPHEADER, array('Authorization: bearer ' . $access_token));
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
$r = curl_exec($c);
curl_close($c);
$d = json_decode($r);
echo sprintf('%s %s %s', $d->name, $d->email, $d->user_id);recuperiamo l'access_token dall'url ($_GET['access_token']), anche in questo caso sostituiamo 'Your-Client-ID' col nostro Client-ID, verifichiamo l'access_token inviando una richiesta a
https://api.amazon.com/auth/o2/tokeninfo
aggiungendo come parametro query access_token, se l'access_token non è valido allora verrà restituito un errore, in caso contrario cioè che l'access_token sia valido, possiamo ottenere i dati dell'utente che ha effettuato il login con le sue credenziali Amazon effettuando una richiesta all'url
https://api.amazon.com/user/profile
inserendo nell'intestazione l'access_token, se tutto va a buon fine otterremo nome, email e user_id dell'utente.
Per testare l'applicazione di esempio fare click sul pulsante "login width Amazon" nella pagina index.html creata in precedenza
ed effettuare il login con le proprie credenziali.