2

I have a Google Chrome App that uses a <webview> component.

Inside the <webview>, at the URL of the guest, user authentication is handled using a popup and redirect managed by OAuth client in response to a login button onclick event.

My problem is that when I click my login button, nothing happens. i.e., No popup. No redirect. No login.

How do I fix this to allow the popup and redirect needed by my OAuth implementation?

window.html 
<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <webview id="webview" src="https://mywebapp.com"></webview>
    </body>
</html>
background.js 
chrome.app.runtime.onLaunched.addListener(function() {
    runApp();
});

function runApp() {
    chrome.app.window.create('window.html', {
        state: 'fullscreen'
    });
}

var webview = null;
function isSafeUrl(url) {
    // This is Hello world test for now; permissions code will go here later
    return true;
}

function onPermissionRequest(e) {
    e.request.allow();
    // This is Hello world test for now; permissions code will go here later
}

function onDomReady() {
    webview = document.getElementById('webview');
    webview.addEventListener('permissionrequest', onPermissionRequest);
}

document.addEventListener('DOMContentLoaded', onDomReady);
Xan
  • 74,770
  • 16
  • 179
  • 206
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
  • Regarding popup OAuth and WebView, see https://stackoverflow.com/questions/12648099/making-facebook-login-work-with-an-android-webview – rogerdpack Oct 11 '17 at 06:34

1 Answers1

2

Your script needs to be split into two parts.

The background script runs in a different document than window.html, the Event page. Your app should look like this:

enter image description here

// This should be split off to app.js
var webview = null;
function isSafeUrl(url) {
    // This is Hello world test for now; permissions code will go here later
    return true;
}

function onPermissionRequest(e) {
    e.request.allow();
    // This is Hello world test for now; permissions code will go here later
}

function onDomReady() {
    webview = document.getElementById('webview');
    webview.addEventListener('permissionrequest', onPermissionRequest);
}

document.addEventListener('DOMContentLoaded', onDomReady);

Then include a <script> tag for the new script to window.html.

Since there is no such concept as "webview window" in a Chrome App, it's going to be more complicated than allowing everything.

You need to catch the newwindow event and process it by creating a new <webview>, possibly in another window. It's not very easy, but there may be implementations already if you look for them.

For the authentication to actually proceed, you need to make sure that the two webviews share a partition.

..as you can see, it's quite a bit more complicated than iframes.

However! I do believe you're going down an incorrect path altogether. If your task is to get an OAuth token, you should consider chrome.identity API, specifically launchWebAuthFlow.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • I am implementing the solution you describe. [After reading the docs](https://developer.chrome.com/apps/app_lifecycle#eventpage), it looks like I also might have to add the `app.js` file to the `background` field in the `manifest.json` file? Quick question, do I also have to add the `jquery` library to the same `background` field? (I noticed you added the `[jquery]` tag to this question.) Because I made all the changes you recommended and it's still not working yet. – Let Me Tink About It Dec 14 '15 at 21:40
  • Err, `jquery` was an accidental mistag by me, I meant `javascript`. You don't need jQuery for anything. The point of having the separate `app.js` is so that it's _not_ a background script. – Xan Dec 14 '15 at 21:44
  • I see. That all makes sense now. Only problem is, it's still not working. Any ideas what else I might try? I can edit the question and post what I have done to implement this if you like. But at this point I need to track down what else might be causing the problem or come up with a plan for how to systematically identify the cause of why I'm not seeing the popup/redirect/login. – Let Me Tink About It Dec 14 '15 at 21:47
  • @Mowzer Yes, I just edited in a few. BTW, you really should inspect your app windows to try and debug it - easiest to do so from `chrome://inspect/#apps` – Xan Dec 14 '15 at 21:49