I am working on Xamarin cross platform app where I am implementing Google Sign on.
From browser and postman, I am able to authticate and get user data using api.
But when I am using in Xamarin forms webview, I am getting error of disallowed_useragent .
Because Google no longer supports webview request. So I need to set user agent in andriod as well as iOS app OR something to setup in PCL project that will be used by both platform.
I didn't find solution to solve this problem
Here is my code :
private async void LoginWithGoogle_Clicked(object sender, EventArgs e)
{
ShowLoader(true);
var authRequest =
"https://accounts.google.com/o/oauth2/v2/auth"
+ "?response_type=code"
+ "&scope=email%20profile"
+ "&redirect_uri=" + Constants.GoogleRedirectUri
+ "&client_id=" + Constants.GoogleClientId;
var webView = new WebView
{
Source = authRequest,
HeightRequest = 1
};
webView.Navigated += WebViewOnNavigatedForGoogle;
Content = webView;
ShowLoader(false);
}
Check out https://github.com/xamarin/Xamarin.Auth, there is working solution :)
Related
I am working on ionic app and I want to redirect user from app to google map application for showing directions to user but when I am setting a Key restriction to NONE it works perfectly.
But when I set restriction to Android apps and provide a proper Package name & SHA-1 It give me error: Google Maps JavaScript API error: RefererNotAllowedMapError.
I think it is because:
ionic app is basically a webview. (which I am using)
and if this is the reason how can I protect my API key?
I use code to open Google map in android app is
showDirection(currentLocation, destLocation) {
let destination = destLocation.latitude + ',' + destLocation.longitude;
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: currentLocation,
destination: destination,
travelMode: 'DRIVING'
}, function (response, status) {
if (status === 'OK') {
let mapUrl = 'http://maps.google.com/?';
var route = response.routes[0];
route.legs.forEach((value, index) => {
if (index == 0) {
mapUrl += 'saddr' + value.start_address + '&daddr=' + value.end_address;
} else {
mapUrl += '+to:' + value.end_address;
}
});
window.location.href = mapUrl;
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
can someone help?
Android app restriction is only valid for Google Maps SDK for Android. In your case when you use Ionic with WebView and Google Maps JavaScript API the only supported restriction is HTTP referrer.
You can check yourself which type of restriction is supported by each API on this page
https://developers.google.com/maps/faq#keysystem
In order to set valid HTTP referrer restriction in your Ionic app you should check what value has window.location.href when you open a map in your WebView.
For example, if the window.location.href is something like file://some/path you should use this value as referrer.
Also note that URLs with a file:// protocol require special representation as explained in
https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key
Note: file:// referers need a special representation to be added to the key restriction. The "file://" part should be replaced with "_file_url_" before being added to the key restriction. For example, "file:///path/to/" should be formatted as "_file_url_//path/to/*". After enabling file:// referers, it is recommended you regularly check your usage, to make sure it matches your expectations.
UPDATE
I believe you can avoid using DirectionsService and open Google Maps directly with Google Maps URLs in directions mode
The code snippet might be
showDirection(currentLocation, destLocation) {
const destination = destLocation.latitude + ',' + destLocation.longitude;
let mapUrl = "https://www.google.com/maps/dir/?api=1";
mapUrl += "&origin=" + currentLocation;
mapUrl += "&destination=" + destination;
mapUrl += "&travelmode=driving";
mapUrl += "&dir_action=navigate";
window.location.href = mapUrl;
}
In this scenario you don't need using Google Maps JavaScript API, you don't need an API key and you don't pay for using Maps JavaScript API service.
I am developing a simple android app using phonegap that sends a google maps geocoding api request with lat,lan location and returns an address.
When working using my desktop, everything works fine!
Once I build the app using the adobe phonegap cloud builder, it does not work. in addition, I am unable to debug as nothing is presented on the app. it simply shows an empty value.
Could this be a CORS issue? HTTPS? Some issue using a mobile user-agent for google maps requests? I am unsure. appreciate any help!
this is my code:
function maps_api(latlng){
var divdata = $('div#data');
divdata.text('cleared');
updateStatus('Starting google api: ');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
updateStatus(this.responseText);
var myArr = JSON.parse(this.responseText);
var divdata = $('div#data');
divdata.text(myArr["results"][0]["formatted_address"]);
}
else
{
updateStatus(this.responseText);
var divdata = $('div#data');
divdata.text(xhttp.statusText);
}
};
xhttp.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&key=myprivatekey", true);
xhttp.send();
}
I managed to resolve this by installing the whitelist-plugin and allowing communication to google maps server
I'm working on an Ionic 2 app which requires logging in using external link. For security reason I would prefer to open the link in system browser. After I open the link and login with username & password, a token will be returned in the body of the html. Is there a way to pass that token to my app? Or are there any other solutions to tackle this problem? Thank you.
This is extremely conceptual, but you could use the cordova plugin inappbrowser to open a browser inside the app, listen to the exit event to wait for the user to close the in-app browser, and there inject a script to retrieve the token from the html, something like:
inAppBrowserRef = undefined;
showLogin(url) {
var target = "_blank";
var options = "location=yes,hidden=yes";
this.inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
with (this.inAppBrowserRef) {
addEventListener('exit', this.exitCallBack);
}
}
exitCallBack(params) {
captureToken = "return token = [[jquery to retrieve the token]]";
this.inAppBrowserRef.executeScript({ code: captureToken}, this.executeScriptCallBack);
this.inAppBrowserRef.close();
this.inAppBrowserRef = undefined;
}
executeScriptCallBack(token) {
this.token=token;
}
I am using the google drive picker to open files from google drive within a web page. The dialog works correctly in most browsers including mobile Chrome, however, with the Android browser, tapping on a file does not select it.
This is using a Samsung Galaxy Note 1 with factory settings + updates. I can replicate this problem with an unrelated application, mindmup which I will use this as the reproduction steps given its publicly accessible:
i)
http://www.mindmup.com/
From any machine, create and save a mindmap to your google drive
ii)
With the Android browser, revisit the site and choose File -> Open ->From Google Drive
iii)
The google drive picker will appear and display your file. The dialog will be scrollable and can be cancelled but tapping a file will not select it.
How can I fix this problem in the Android browser?
The official Google response is that the picker does not support Android. Huh. Works on IOS. Maybe they could add that little tidbit to their documentation.
No other recourse but to implement my own using the files.list api:
retrieveAllFiles = function(callback) {
var retrievePageOfFiles = function(request, result) {
request.execute(function(resp) {
result = result.concat(resp.items);
var nextPageToken = resp.nextPageToken;
if (nextPageToken) {
request = gapi.client.drive.files.list({
'pageToken': nextPageToken,
'q' : 'trashed = false'
});
retrievePageOfFiles(request, result);
} else {
callback(result);
}
});
};
var initialRequest = gapi.client.drive.files.list({
'q' : 'trashed = false'
});
retrievePageOfFiles(initialRequest, []);
};
We are trying to implement a simple solution to our website developed via Flex and mobile apps developed using Adobe Air.
1) Our users would like to import their facebook friends onto website via www.ourwebsite.com and also via the Ourwebsite android, ios & blackberry apps.
2) We want to use the Facebook Requests dialog which allows users to select their friends and send multiple invitations at a time
3) When the recepient clicks on the notification he receives
in case of web, it should direct the notification recipient to www.ourwebsite.com
in case of mobile app, it should re-direct to respective appstore to download our app.
We tried several configurations but it's not working for us.
As previously said we have developed our website using Adobe Flex and our Mobiles apps run using Adobe Air. Do we need to install the Facebook native SDK's into our code?
Strangely the exact same requirement is working for www.naaptol.com and 9lessons.info.
But we're unable to achieve the same technique.
Can anyone guide us or advise if we're missing any important aspect of Facebook App & its policies.
Thank you.
Sai Krishna
So if I think I am understanding this right, you want to be able to open a link differently based upon the platform they are on. Here is some js that will do it for ios and android. If they have your app installed it will launch the app, otherwise it will send them to the app store
// if iPod / iPhone, display install app prompt
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i) || navigator.userAgent.match(/android/i)) {
var store_loc = "itms://itunes.com/apps/youriOSApp";
var href = "yourPrefix://";
var is_android = false;
if (navigator.userAgent.match(/android/i)) {
store_loc = "https://play.google.com/store/apps/details?id=air.com.your.app";
is_android = true;
}
var app_loc = href;
if (is_android) {
var w = null;
try {
w = window.open(app_loc, '_blank');
} catch (e) {
// no exception
}
if (w) {
window.close();
} else {
window.location = store_loc;
}
} else {
var timeout = null;
window.location.replace(app_loc);
timeout = setTimeout(function () {
"use strict";
window.location = store_loc;
}, 300);
onblur = function () {
"use strict";
clearTimeout(timeout);
};
}
}