[FIXED] How to implement a sign-in button of Google and Facebook in a Google AMP?

Issue

I want to create a simple "sign-in" button of Facebook and Google.

I read the documentation (https://amp.dev/documentation/examples/personalization/oauth2_login/#setup) and look at the example in the playground section, but my problem is how do I do this part

"facebook-sign-in": "https://ampbyexample.com/oauth/login/facebook",
"google-sign-in": "https://ampbyexample.com/oauth/login/google",

in example of AMP documentation:

<script id="amp-access" type="application/json">
    {
        "authorization": "https://ampbyexample.com/oauth/status?_=RANDOM",
        "noPingback": "true",
        "login": {
          "facebook-sign-in":"https://ampbyexample.com/oauth/login/facebook",
          "google-sign-in":"https://ampbyexample.com/oauth/login/google",
          "github-sign-in":"https://ampbyexample.com/oauth/login/github",
          "sign-out":"https://ampbyexample.com/oauth/logout"
        },
        "authorizationFallbackResponse": {
            "error": true,
            "loggedIn": false
        }
    }
</script>

What do I do inside of this file https://ampbyexample.com/oauth/login/facebook in my application? what do I need to do it? I'm so confused about this part.

EDIT I found this example but how make this logic with facebook without open a new pop up inside of amp's popup? (https://developers.facebook.com/docs/facebook-login/web) about this example, my login button just stay inside of amp popup... but my expected result is like this example here

Solution

Sign-in with amp-access will always open a new popup. This is to ensure that it's always possible to write first party cookies on your own origin, even if the AMP pages is served from an AMP cache.

Answered By - Sebastian Benz

Answer Checked By - Mary Flores (PHPFixing Volunteer)