how to implement flutter web local notification? - flutter-web

I'm wondering if I can implement local notification in flutter web? I saw that I can create local notification for mobile app Android or IOS but is it possible to use it for web app? or any other alternative to accomplish it?

Just use the class Notification in dart:html package. You can do something like this:
import 'dart:html' as web;
Future<void> showNotification( String message ) async {
var permission = web.Notification.permission;
if (permission != 'granted') {
permission = await web.Notification.requestPermission();
}
if (permission == 'granted') {
web.Notification( message );
}
}
More info about the javascript notification API here: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

Related

How to configure Azure App Service (for Mobile) and B2C Authentication and access Azure SQL Database

I have a xamarin.forms mobile App using Microsoft.WindowsAzure.MobileServices and Microsoft.Identity.Client. Using EasyAuth I successfully got the xamarin mobile app to post data to the AzureSQL tables linked via connection string in the App Service configuration section. I use the local and offline sync methods of MobileServiceClient. I then attempted to change to B2C authentication. I setup a Tenant and under this tenant registered a new App as a native client called "MobileB2C". Redirect URIs were added automatically. I then created the signinsignup UserFlows.
Back to the Azure App Service (Mobile) under Authentication section I added a provider and selected the B2C App, MobileB2C. I did not populate the "allowed token audiences" field and Azure automatically created Client secret setting name "MICROSOFT_PROVIDER_AUTHENTICATION_SECRET" and the issuer URL.
So when I run the xamarin mobile app I can login via azure B2C and I can see that the authResult returns the users correct info along with UserIdentifier,aud, iss, sub, oid etc.
Once authResult is returned the xamarin mobile then tries to use the sync methods of MobileServiceClient to save data to the AzureSQL table. Its at this point that it fails. When the line await mClient.SyncContext.PushAsync().ConfigureAwait(false); is hit an error occurs described as Microsoft.WindowsAzure.MobileServices.Sync.MobileServicePushStatus.CancelledByAuthentication. I continued to try and confirgure the Azure back end differently and now I no linger get the CancelledByAuthentication error but instead get Microsoft.WindowsAzure.MobileServices.Sync.MobileServicePushStatus.CancelledByNetworkError.
The relevant xamarin mobile app code to implement the authentication and AzureSQL table update is as follows;
private B2CAuthenticationService()
{
// default redirectURI; each platform specific project will have to override it with its own
var builder = PublicClientApplicationBuilder.Create(B2CConstants.ClientID)
.WithB2CAuthority(B2CConstants.AuthoritySignInSignUp)
.WithIosKeychainSecurityGroup(B2CConstants.IOSKeyChainGroup)
.WithRedirectUri($"msal{B2CConstants.ClientID}://auth");
// Android implementation is based on https://github.com/jamesmontemagno/CurrentActivityPlugin
// iOS implementation would require to expose the current ViewControler - not currently implemented as it is not required
// UWP does not require this
var windowLocatorService = DependencyService.Get<IParentWindowLocatorService>();
if (windowLocatorService != null)
{
builder = builder.WithParentActivityOrWindow(() => windowLocatorService?.GetCurrentParentWindow());
}
_pca = builder.Build();
}
public async Task<UserContext> SignInAsync()
{
UserContext newContext;
try
{
// acquire token silent
newContext = await AcquireTokenSilent();
}
catch (MsalUiRequiredException)
{
// acquire token interactive
newContext = await SignInInteractively();
}
return newContext;
}
private async Task<UserContext> SignInInteractively()
{
AuthenticationResult authResult = await _pca.AcquireTokenInteractive(B2CConstants.Scopes)
.ExecuteAsync();
var newContext = UpdateUserInfo(authResult);
UserSingleton.Instance.UserId = newContext.UserIdentifier;
return newContext;
}
THe xamarin mobile app adds a record to the local database and then RefreshItemsAsync begins the synchronisation to the AzureSQL.
await azureService.AddUserSurveyAsync(newSurvey).ConfigureAwait(false);
await azureService.RefreshItemsAsync(true).ConfigureAwait(false);
It is at the PushAsync line below that the the code fails.
public async Task InitializeAsync()
{
using (await initializationLock.LockAsync())
{
if (!isInitialized)
{
mClient = new MobileServiceClient(https://mobileservice.azurewebsites.net);
// Define the offline store.
mStore = new MobileServiceSQLiteStore("mobile3.db");
mStore.DefineTable<UserSurvey>();
await mClient.SyncContext.InitializeAsync(mStore, new MobileServiceSyncHandler()).ConfigureAwait(false);
UserSurveyTable = mClient.GetSyncTable<UserSurvey>();
isInitialized = true;
}
}
}
public async Task RefreshItemsAsync(bool syncItems)
{
if (syncItems)
{
await SynchronizeAsync().ConfigureAwait(false);
}
}
public async Task SynchronizeAsync()
{
await InitializeAsync().ConfigureAwait(false);
IReadOnlyCollection<MobileServiceTableOperationError> syncErrors = null;
if (!CrossConnectivity.Current.IsConnected)
return;
try
{
await mClient.SyncContext.PushAsync().ConfigureAwait(false);
await UserSurveyTable.PullAsync("usersurveys", UserSurveyTable.CreateQuery()).ConfigureAwait(false);
}
catch (MobileServicePushFailedException error)
{
if (error.PushResult != null)
{
foreach (var result in error.PushResult.Errors)
{
await ResolveError(result);
}
}
}
}
What is wrong with the Azure back end configuration or perhaps I'm missing code as I can't understand how the xamarin mobile app can then attempt to communicate with the Azure Mobile App Service and AzureSQL as I don't send any token with those lines of code for PushAsync etc or perhaps this is abstracted away?
Here are images of the exceptions;
enter image description here
enter image description here
As promised, here is the succinct version of AAD authentication. For your purposes, B2C authentication is the same as AAD authentication.
There are two application definitions at play here - one for the mobile application (which basically says "this person is authenticated"), and one for the service (which says "a token authenticated for this mobile application can access this service"). So, you create an application ID for your mobile application, and an application ID for your service, and then you configure the service application ID to accept the mobile application.
The "WPF" tutorial for Azure Mobile Apps gives the general overview, although it's for WPF instead of Xamarin. The pieces you need are all the same.
The "WPF" tutorial here: https://learn.microsoft.com/en-us/azure/developer/mobile-apps/azure-mobile-apps/quickstarts/wpf/authentication

Flutter app: How to implement a proper logout function?

I have a flutter App using Azure B2C authentication. To achieve this I use the flutter appAuth package. The login process works fine but appAuth does not provide a logout functionality. After logging in I get an access token. Until now my logout was to delete this access token.
The problem is, that Azure require a web app session lifetime of at least 15 minutes in the SignIn user flow. This means: If a user logs in and out within 15 minutes, he will automatically be logged in again. This makes a login with another user impossible.
I hope to fix this behavior with a real logout instead of only deleting the access tokens. In found the following line of code in the Azure Active Directory documentation. But I cannot manage to get it running. Any suggestions for a logout function?
GET https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/logout?post_logout_redirect_uri=https%3A%2F%2Fjwt.ms%2F
I followed the below source to implement the below log out function using app auth written by David White.
Future<void> _logOut() async {
try {
//for some reason the API works differently on iOS and Android
Map<String, String> additionalParameters;
if (Platform.isAndroid) {
//works on Android but will miss p parameter when redirected back to authorize on iOS
additionalParameters = {
"id_token_hint": _idToken,
"post_logout_redirect_uri": _redirectUrl
};
} else if (Platform.isIOS) {
// with p parameter when redirected back to authorize on iOS
additionalParameters = {
"id_token_hint": _idToken,
"post_logout_redirect_uri": _redirectUrl,
'p': '<tenantID>'
};
}
await appAuth.authorizeAndExchangeCode(
AuthorizationTokenRequest(
_clientId,
_redirectUrl,
promptValues: ['login'],
discoveryUrl: _discoveryURL,
additionalParameters: additionalParameters,
scopes: _scopes,
),
);
} catch (e) {
print(e);
}
setState(() {
_jwt = null;
});
}
source: https://www.detroitdave.dev/2020/04/simple-azure-b2c-flutter.html

Welcome message Bot Framework v4 nodejs

I'm developing a multichannel bot (focusing on web and telegram) that's based on Microsoft's Bot Framework (https://learn.microsoft.com/en-us/azure/bot-service/?view=azure-bot-service-4.0)
I'm stuck with the initial message the user is getting.
My bot is based on the complex bot published by Microsoft: https://github.com/Microsoft/BotFramework-Samples/tree/master/SDKV4-Samples/js/complexDialogBot
Issue I'm seeing is that in the emulator bot is working great, on the web user is not greeted with the welcome message. I've used iframe to integrate the bot.
I'm checking activity types and when members are added to the chat, but seems like it's not triggering on the web.
if (turnContext.activity.type === ActivityTypes.ConversationUpdate) {
if (turnContext.activity.membersAdded && turnContext.activity.membersAdded.length > 0) {
await this.sendWelcomeMessage(turnContext);
}
}
I saw similar questions asked but either for bot framework v3 or C# implementation (like this one Welcome message not visibile in Webchat,but work in Emulator and Welcome Message not working in Azure portal using Microsoft Bot Builder SDK(v4) for nodejs)
try using this
enter code here
this.onMembersAdded(async context => {
const membersAdded = context.activity.membersAdded;
for (let cnt = 0; cnt < membersAdded.length; cnt++) {
if (membersAdded[cnt].id == context.activity.recipient.id) {
const welcomeCard = CardFactory.adaptiveCard(WelcomeCard);
}
}
});
You can solve your problem in below code
in iframe to integrate the bot you can write member Adding code copy in inside !turnContext.responded
if (turnContext.activity.type === ActivityTypes.Message) {
if (!turnContext.responded) {
await this.sendWelcomeMessage(turnContext);
}
}

Test Azure hosted WebApi locally to send Push Notifications to all devices

I apologize if my question is silly, but I am new to WebApi. I have followed a tutorial and published a WebApi to Azure. I also have created a Xamarin Mobile App and all the framework in Azure to be able to send Push Notifications to both Android and iOS. I have a notification hub set up, app service, web service that hosts the web api etc. Testing with Azure using the Push tab to send notifications individually to both ios and android works perfectly.
I posted the code of the web api. How can I use the web api locally on my computer to send a notification to both platforms (ios and android) please?
[RoutePrefix("sanotifications")]
public class SANotifController : ApiController
{
[HttpPost]
[Route("")]
public async Task<IHttpActionResult> SendNotificationAsync ([FromBody] string message)
{
//Get the settings for the server project
HttpConfiguration config = this.Configuration;
try
{
await InternalSendNotificationAsync(message, null);
}
catch (Exception ex)
{
//write the failure result to the logs
config.Services.GetTraceWriter().Error(ex.Message, null, "Push.SendAsync Error");
return BadRequest(ex.Message);
}
return Ok();
}
[HttpPost]
[Route("{installationid}")]
public async Task<IHttpActionResult> SendNotificationAsync(string installationId, [FromBody] string message)
{
//get the settings for the server project
HttpConfiguration config = this.Configuration;
try
{
await SendNotificationAsync(message, installationId);
}
catch (Exception ex)
{
//write the failure to the logs
config.Services.GetTraceWriter().Error(ex.Message, null, "Push.SendAsync Error");
return BadRequest(ex.Message);
}
return Ok();
}
async Task<NotificationOutcome> InternalSendNotificationAsync (string message, string installationId)
{
//Get the settings for the server project
HttpConfiguration config = this.Configuration;
//use code below if web api is already published to Azure to get existing setup
//does not work locally
var settings = config.GetMobileAppSettingsProvider().GetMobileAppSettings();
/*
//Get the Notification Hubs credentials for the Mobile App
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings.Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;
*/
//the name of the Notification Hub from the overview page.
// works locally
string notificationHubName = "sa1hub";
//use "DefaultFullSharedAccessSignature" from the portal's Access Policies
string notificationHubConnection = "Endpoint=sb://sahub.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=71S2#QEWF##$";
// create a new notification hub client
var hub = NotificationHubClient.CreateClientFromConnectionString(
notificationHubConnection,
notificationHubName,
// Don't use this in RELEASE builds. The number of devices is limited.
// If TRUE, the send method will return the devices a message was
// delivered to.
enableTestSend: true);
// use a template compatible with both devices
// send the message so that all template registrations that contain "messageParam"
// will receive the notification. This includes APNS, GCM, WNS and MPNS template registrations.
var templateParams = new Dictionary<string, string>
{
["messageParam"] = message
};
// send the push notification and log the results
NotificationOutcome result = null;
if (string.IsNullOrWhiteSpace(installationId))
{
result = await hub.SendTemplateNotificationAsync(templateParams).ConfigureAwait(false);
}
else
{
result = await hub.SendTemplateNotificationAsync(templateParams, "$InstallationId:{" + installationId + "}").ConfigureAwait(false);
}
// Write the success result to the logs.
config.Services.GetTraceWriter().Info(result.State.ToString());
return result;
}
}
}
In Xamarin there are two way to send push notification from server to client. Even on Microsoft forum it's very clear step mention to Implementation.
Use of Azure Hub notification we can send easily notification on Cross mobile Platform or Native
Azure Push Notification
Another App Center Push notification Implementation.
Xamarin App Center Push Notification
To send push notification for IOS devices you have to communicate with APNS and for Android we need GCM. Azure works like an intermediate between our app and these services. So if you would like to send notification without Azure I prefer
Firebase Cloud Messaging. it is google product and allows us to send cross platform push notifications for both IOS and Android.
We can host our WebAPI in our windows local IIS and which should be configured for Firebase.
Example app for xamarin : FirebasePushNotificationPlugin

Port Admob to mobile web

I am in the depths of creating a mobile web game that I will soon release. I am interested in monetizing this app. I want the game to feel like its a regular app and therefore wish to have admob ads (with deep links to the app store). I have heard that these also have substantially higher cpm that adsense mobile. My question is this: if I "port" admob using node.js will the clicks and views be recorded as server side, i.e. coming from one place, or mobile, i.e. from the user?
Here are some resources I am thinking of using:
https://media.admob.com/api/v1/docs/
https://github.com/floatinghotpot/cordova-plugin-admob
Any thoughts?
I am the author of the plugin you mentioned: https://github.com/floatinghotpot/cordova-plugin-admob
The basic version has been deprecated, and the pro version is recommended: https://github.com/floatinghotpot/cordova-admob-pro
Instead of porting AdMob to mobile web, you can consider use Cordova to pack your html5 game as a hybrid APP, then publish to Apple AppStore or Google Play Store.
Use the AdMob plugin to present Ad in your app, then Google will pay you.
Only a few javascript lines to present the Ad, and the AdMob SDK will take care of Ad presenting and user click.
See the example code:
function onLoad() {
if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
document.addEventListener('deviceready', initApp, false);
} else {
initApp();
}
}
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-6869992474017983/9375997553',
interstitial: 'ca-app-pub-6869992474017983/1657046752'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-6869992474017983/4806197152',
interstitial: 'ca-app-pub-6869992474017983/7563979554'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956'
};
}
// it will display smart banner at top center, using the default options
if(AdMob) AdMob.createBanner( {
adId: admobid.banner,
position: AdMob.AD_POSITION.TOP_CENTER,
autoShow: true } );

Resources