Logowanie

Przy pierwszym wylądowaniu na stronie widoczne są 2 komentarze i przycisk logowania.

Jeśli poszukasz przycisku logowania w kodzie, znajdziesz tekst:

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>

  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

Sposób działania atrybutów związanych ze składnikiem amp-access zależy od konfiguracji składnika amp-access dla całej strony, w naszym przypadku następującej:

<script id="amp-access" type="application/json">
  {
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false
    }
  }
</script>

Punkt końcowy autoryzacji jest wdrażany jako część witryny AMPByExample. Podanie tego punktu końcowego jest obowiązkiem wydawcy strony. W tym przykładowym przypadku, dla uproszczenia, zaimplementowaliśmy podstawową logikę w taki sposób, że po otrzymaniu tego żądania serwer odczytuje wartość z pliku cookie o nazwie ABE_LOGGED_IN. Jeśli pliku cookie nie ma, zwracamy odpowiedź JSON zawierającą wartość loggedIn = false. W wyniku tego, gdy użytkownik wyląduje na stronie po raz pierwszy, żądanie to zwróci wartość loggedIn = false i pojawi się przycisk logowania.

Patrząc ponownie na kod HTML przycisku, stosując instrukcję on="tap:amp-access.login-sign-in" określamy, że po dotknięciu przycisku należy użyć adresu URL określonego w kodzie JSON widniejącym powyżej:

{
"login": {
"sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
}
}

Strona logowania jest stroną bez AMP, w której dla uproszczenia wypełniamy wartości loginu i hasła. Zauważ użycie ukrytego typu wejścia returnURL, wypełnianego przez serwer AMPByExample poprzez tworzenie szablonu po stronie serwera. Serwer odczytuje tę wartość z parametru o nazwie return, automatycznie dodawanego przez bibliotekę AMP do adresu URL logowania.

W poniższym przykładzie wartość parametru return jest dodawana do żądania po kliknięciu przycisku logowania. Możesz zbadać tę wartość, korzystając z konsoli Chrome DevTools i przechodząc do zakładki Network.

Gdy serwer AMPByExample otrzyma żądanie POST ze strony logowania, a login i hasło są prawidłowe, przekieruje żądanie do wspomnianego powyżej adresu returnURL i dołączy parametr #success=true. Środowisko uruchomieniowe AMP może teraz autoryzować stronę i w końcu zezwolić na dodanie komentarza.

Ważne jest, aby zrozumieć, co robi środowisko uruchomieniowe AMP i co powinien robić serwer, ponieważ za implementację serwera odpowiada wydawca strony.

W skrócie:

• Środowisko uruchomieniowe AMP automatycznie dodaje parametr return do żądania zalogowania określonego wewnątrz obiektu logowania JSON
• Środowisko uruchomieniowe AMP zamyka stronę logowania i przekierowuje do strony określonej przez parametr zwrotnego adresu URL.
• Serwer powinien zaaranżować odpowiedź po kliknięciu przycisku logowania przez użytkownika.