CODEWITHSUNDEEP
google-chrome-extensionoauth-2.0google-oauthchrome-extension-manifest-v3
Adarsh Shrivastava
Adarsh Shrivastava

Reputation: 1

Authorization Page Could not be loaded while developing a chrome extension with login functionality using Google OAUTH2

I was trying to develop a chrome extension with login functionality using google OAUTH2.0, but i keep facing this error -> Unchecked runtime.lastError: Authorization page could not be loaded.

When i manually visit the URL passed on to the chrome.identity.launchWebAuthFlow function google authentication page does popup and after i login it directs me to expected redirectURL .

I do not know how to solve this error, I am new to Dev please forgive me if I have asked a trivial question or a question that has been previously answered because i did search and read most of them and tried all the possible suggestions but this error wasn't fixed. Thankyou.

manifest.json

{
    "name" : "Login test",
    "description" : "test openid",
    "version" : "0.1.0",
    "key": "<key>",
    "manifest_version" : 3,
    "icons" : {
        
    },
    "background" : {
        "service_worker" : "./background.js"
    },

    "options_page" : "./options.html",
    "action":{
        "default_popup" : "./popup.html"
    },
    "permissions" :[
        "identity"
    ]
}

popup.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/popup.js"></script>
    <title>Sign in</title>
    </head>
<body>
    <p id="here">You are currently not signed in.</p>
    <!-- <p>click on sign in </p> -->

    <button class="sign">Sign in</button>

    <!-- <button>Check User Status</button> -->
 
</body>
</html>

popup.js

chrome.runtime.sendMessage({message : 'login' } , function(response){
        
});

background.js

let user_signed_in = false;
const CLIENT_ID = encodeURIComponent('<CLIENT_ID>');
const RESPONSE_TYPE = encodeURIComponent('id_token');
const REDIRECT_URI = encodeURIComponent('https://<EXT_ID>.chromiumapp.org');
const STATE = encodeURIComponent('jkls24a3n');
const SCOPE = encodeURIComponent('openid');
const PROMPT = encodeURIComponent('consent');

function create_oauth2_url(){
    let nonce = encodeURIComponent(Math.random().toString(36).substring(2 , 15) + Math.random().toString(36).substring(2 , 15));
    let url = 
    `https://accounts.google.com/o/oauth2/v2/auth
    ?client_id=${CLIENT_ID}
    &response_type=${RESPONSE_TYPE}
    &redirect_uri=${REDIRECT_URI}
    &state=${STATE}
    &scope=${SCOPE}
    &prompt=${PROMPT}
    &nonce=${nonce}
    `;

    console.log(url);
    return url;
}

function is_user_signed_in(){
    return user_signed_in;
}


chrome.runtime.onMessage.addListener((request, sender , sendResponse) => {
    console.log("in");
    if(request.message === 'login'){
        if(is_user_signed_in()){
            console.log("User is already signed in.");
        }
        else{
            var u =  create_oauth2_url();
            chrome.identity.launchWebAuthFlow({
                url : u,
                interactive : true
            } , function(redirect_url){
                console.log("redirect_URL : " + redirect_url);
                sendResponse("Success");
            });
            return true;
        }
    }
    else if(request.message === 'logout'){
        
    }
    else if(request.message === 'isUserSignedIn'){

    }
});

When i call the launchWebAuthFlow() function it isn't responding with the redirect URL and hence redirect URL has null value.

Upvotes: 0

Views: 154

Answers (1)

pabloRN
pabloRN

Reputation: 906

I would say one of the issues is the way you are getting the redirect_uri

Basically you have to:

const REDIRECT_URI = chrome.identity.getRedirectURL();

Also for me worked to get that REDIRECT_URI generated and paste it at your yahoo app Redirect URI(s) in the yahoo developer. They have to be the same.

Upvotes: 0

Related Questions