Přihlášení přes soc. sítě - Facebook, Google

Home Wiki Přihlášení přes soc. sítě - Facebook, Google

Často potřebujeme uživatele přihlásit přes více kanálů:

jméno / heslo
facebook
google

V jednoduchých aplikací, kde je to možné, používáme jako jednoznačný identifikátor email. Ten je společný pro všechny kanály. Potom je možné se přihlašovat k jednomu účtu různými kanály.

V databázi je u každého uživatele uloženo:

email
hash hesla (případně salt)

Není třeba ukládat Facebook ID nebo Google Open auth Token.

Přihlášení přes jméno / heslo

V aplikaci je formulář.

Do backendu se posílá jméno a heslo. Na serveru se ověřuje hash hesla.
( + je zde logika pro reset hesla, zamčení účtu při neplatných pokusech, atd. …)

Přihlášení přes Facebook

V aplikaci používáme plugin cordova-plugin-facebook4 :

<plugin name="cordova-plugin-facebook4" spec="^6.0.0">
    <variable name="APP_ID" value="xxxx" />
    <variable name="APP_NAME" value="xxx" />
</plugin>

V kódu se volá fb.login, požaduje se email a public_profile. Po úspěšném přihlášením získáme accessToken, který se odesílá na server. Např. takto:

const result = await this.fb.login(["email", "public_profile"]);
if (result && result.authResponse && result.authResponse.accessToken) {
    return result.authResponse.accessToken;
} else {
    throw new Error("Facebook login - unknown error");
}

Na serveru se ověří accessToken volání API facebooku. Voláním se zároveň získá email. Tím je uživatel přihlášen.

$url = "https://graph.facebook.com/me/?fields=" . $fields . "&access_token=" . $access_token;

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, $enable_ssl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);

$result = json_decode($result, true);

if (isset($result["email"])) {
    ...
}

Přihlášení přes Google

V aplikaci používáme plugin cordova-plugin-googleplus :

<plugin name="cordova-plugin-googleplus" spec="7.0.1">
    <variable name="PLAY_SERVICES_VERSION" value="11.6.2" />
    <variable name="REVERSED_CLIENT_ID" value="xxxx" />
    <variable name="WEB_APPLICATION_CLIENT_ID" value="xxxx" />
</plugin>

V kódu se zavolá login a získá accessToken např. takto:

const loginResult: { accessToken: string } = await this.google.login({});
return loginResult.accessToken;

Na serveru se ověří accessToken volání API googlu. Voláním se zároveň získá email. Tím je uživatel přihlášen.

$url="https://www.googleapis.com/oauth2/v3/userinfo?alt=json&access_token=".$access_token;

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, $enable_ssl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);

$result = json_decode($result, true);

if (isset($result["email"])) {
    ...
}