ADAL.JS and Offline Web App - javascript

I have a web page where I implement ADAL.JS.
When browsing the page via the web it works perfectly; however when I try to view it on an iPhone, and I have saved it as a shortcut on the desktop using the Add to Homescreen button, things go haywire.
The initial page (index.html) shows correctly using the apple-mobile-web-app-capable meta tag; however, when the authentication is invoked, I am taken to a real browser window. Once redirected back to index.html, I am still in the separate browser window not the Web App view.
Ultimately, I want to have this as an offline web site with all page functionality running in the view produced by apple-mobile-web-app-capable. Any other ideas as to how to implement this are appreciated.
Thanks in advance.

This is one of the big problems currently existing in iOS webapps. Every link or redirection opens up in a new window.
You can fix it changing window.location.href with JavaScript.

Seem to be missing something...I get at urlNavigate not defined error...suggestions?
alert('Running Auth');
online = navigator.onLine;
authContext = new AuthenticationContext({
tenant: azureTenant,
clientId: azureClientId,
postLogoutRedirectUri: window.location,
//redirectUri: "https://shlpkpiapi.azurewebsites.net/kpiapp/test.html"
});
authContext.config.displayCall=function(url){
if (urlNavigate)
{
this.info('Navigate to:' + urlNavigate);
window.location.href=urlNavigate;
}
else
{
this.info('Navigate url is empty');
}
}
if (authContext.isCallback(window.location.hash)) {
authContext.handleWindowCallback();
var err = authContext.getLoginError();
if (err) {
alert('Error on callback')
}
}
else {
var user = authContext.getCachedUser();
if (user) {
//We have a user in cache and are using those credentials
console.log('Signed in as: ' + user.userName);
} else {
console.log('Not signed in.')
if (online)
{
alert('signing in');
authContext.login();
}
else
{
alert('currently offline');
}
}
}

Ok...I made the change and the error is gone but I don't understand how this is supposed to address the issue. When I add my page to my IPhone home screen (https://xxxxx.azurewebsites.net/app/test.html) and then click on the tile I am taken to the test.html page. On that page page there is an auth function that executes which uses adal.js and takes me to "https://login.microsoftonline.com/xxx.onmicrosoft.com/oauth2...". This shows up in the scope of my IOS Web app and has my account listed and the Use another account option. I click on my account or choose the Use another account option and I am taken to another page that is opened in Safari.

Related

User location via ip-api only works on local

I am very new to web development and I suspect this is a simple issue.
When I run my website via VScode my landing page displays the users region and city name onload. When I upload the same code to my website it returns nothing. I'm having trouble even displaying an error message in order to debug. I tried to get location.origin because this api apparently requires a "non null origin". I don't even fully understand how ACAO works.
//Display users location in welcome message via IP
function locate() {
fetch('https://ip-api.com/json/')
.then(function(response) {
response.json().then(jsonData => {
data = jsonData;
document.getElementById("welcome").innerHTML = `Come in, ${data.city}, ${data.regionName}. Everyone is welcome.`
});
})
.catch(function(error) {
//Attempt at getting some information on the issue.
document.getElementById("welcome").innerHTML = `Come in, ${location.origin}. Everyone is welcome.`
console.log(error)
});
};
All help, and constructive criticism, is appreciated. Thanks.
The issue here was that I changed my api for ip information but the website data was cached in the browser. I had to shift + reload the page to see the updated web page.

How to find the ID / Program name of a phone app application in web form?

What I am doing
I am creating a web form that is being used as a QR code to open an application installed in an android / IOS phone. When the user scans the QR code the phone shall run the web form and the web form will check if the application is installed inside the phone, if the application is installed, the web form will open the application, if not it will open the google play store/app store web page based on which OS system is being used.
My problem
Right now my problem is that I do not know what is the name/id of the application to trigger/open it, the only thing I about the app know is that it is called Rymtime inside the setting and also the home screen. The application's google play store link is at here and here for the app store.
PS. I do not own/create the application and do not have any access to modify its code.
What I have tried
I have tried to put its name directly into the code:
window.location = "Rymtime://";
I have also tried to put the "id" thingy found inside its google play store website "www...id=com.time2clock.wai.timeemployee"
window.location = "com.time2clock.wai.timeemployee://";
My Code
I created my code based on this stack overflow question.
Below is my code:
<body>
...
<button name="data1" type="button" onclick="getOS()">Click</button> //I use button to test out the function
...
</body>
<script type="text/javascript">
function getOS() {
var userAgent = window.navigator.userAgent,
platform = window.navigator.platform,
windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'], //as I do not own an Iphone I use this to test out the IOS part
iosPlatforms = ['iPhone', 'iPad', 'iPod'],
os = null;
if (iosPlatforms.indexOf(platform) !== -1) {
ios();
} else if (windowsPlatforms.indexOf(platform) !== -1) {
ios(); //as I do not own an Iphone I use this to test out the IOS part
} else if (/Android/.test(userAgent)) {
android();
}
}
function ios() {
setTimeout(function () { window.location = "https://apps.apple.com/my/app/rymtime/id1447217174"; }, 25);
window.location = "Rymtime://"; //I do not test this part because I do not own an Iphone an I am using window to see if the code is being executed, I only check if the website above is runned
}
function android() {
setTimeout(function () { window.location = "https://play.google.com/store/apps/details?id=com.time2clock.wai.timeemployee"; }, 25);
window.location = "Rymtime://"; //The application is not executed thus it redirect to the play store page.
}
</script>
Btw is the location of an application installed inside a phone the same as the others? Like this:
somefile\somefile\packageName
Or something like this:
Username(differ)\somefile\somefile\packageName
Thanks.
I am not sure what it is for IOS but I found out that I can just add &launch=true at the end of the URL of the application's google play store page to launch the app if it is installed.

Check if website was opened from an embed browser

I have a website and I need to check when this site opens from an embed browser.
I need to do a similar flow to Google Login. When Google Login detect that the site is loaded from an embed browser then the user cannot authenticate.
More info
This gives if embed or not
function isEmbed() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
console.log(isEmbed())

Listening for url change in React Native Expo WebBrowser

I would like to open a web browser in React native expo which loads up a url, I then want to listen for a particular URL to be hit, at this point I want it to run some code and then close the browser window.
I've been trying to use Expo's WebBrowser for this.
https://docs.expo.io/versions/latest/sdk/webbrowser/
async componentDidMount() {
Linking.addEventListener("url", this.handleOpenURL);
}
handleOpenURL(event) {
console.log(event.url);
// do something here then dismiss the browser
}
... further on down the code I have this on a button press
let result = await WebBrowser.openBrowserAsync('www.exampleurl.com');
This opens up the web page but does not ever hit the handleOpenUrl code, can this be done and if so has anyone got an example?
Your handleOpenURL function will run only when someone opens a url that redirects to your app, it does not monitor the session of WebBrowser.
If you can control the backend, then you can use redirect link and AuthSession by exco given that . You can do something like:
import { AuthSession } from 'expo';
let authResult = await AuthSession.startAsync({
authUrl: `https://myserverurl.com/?` +
`redirect_uri=${encodeURIComponent(redirectUrl)}`
});
// This part will run after browsing session is over
console.log(authResult)

Register gcm for chrome

I have a chrome Apps use push notification of GCM. I have a problem, when i don't login account on chrome. I can't receive registerId from GCM. I think a idea. When registerId empty, i show notification, request user login to chrome and show login page account on chrome. But because of security concerns , the chrome does not allow access to its setting from external links . How is open "chrome://settings/" from external links? Can register to gcm, If i don't want login account on chrome?
My code:
function setValue()
{
//var thongtin=$('#status').val();
//var thongtin = document.getElementById('status').innerText;
if(registrationId == "")
{
// Pop up a notification to show notification.
chrome.notifications.create(getNotificationId(), {
title: 'CLOUD MONITOR',
iconUrl: 'gcm_128.png',
type: 'basic',
message: 'You must sign in account gmail on google chrome!'
}, function() {});
//event click to notification
chrome.notifications.onClicked.addListener(function() {
window.location.href = "chrome://settings/"
});
}
else
{
//http://mtraffic.longvan.net/device_register?regId=" +registrationId+"&device=android
//document.getElementById('webviewSendData').src = "http://192.168.64.246:8080/register?REGID=" +registrationId+"&DEVICE=desktop";
document.getElementById('webviewSendData').src = "http://mtraffic.longvan.net/device_register?regId="+registrationId+"&device=android";
//document.getElementById('webviewSendData').src = "http://192.168.64.124:8080/monitor/device_register?regId=" +registrationId+"&device=android";
//var url = "http://192.168.64.124:8080/monitor/device_register?regId=" +registrationId+"&device=android";
//httpGet(url);
//alert(thongtin);
//document.getElementById('status').innerHTML="Infomation New";
// Pop up a notification to show notification.
}
}
This code don't run.
chrome.notifications.onClicked.addListener(function() {
window.location.href = "chrome://settings/"
});
I fix code as Derek 朕會功夫.
chrome.notifications.onClicked.addListener(function() {
chrome.tabs.create({url: "chrome://settings/"});
});
And receive error notify: Error in event handler for notifications.onClicked:TypeError: Can't read property 'create' of underfined.
I'm afraid at the moment it's not possible.
Chrome Apps don't have access to tabs/windows API that can open privileged pages; that's why Derek's suggestion does not work.
In future, they may be a way to do this with chrome.browser API. See this feature request, this proposal, and please leave feedback there with your use case.

Categories

Resources