Oynatıcıya atla
Ana içeriğe atla
Altbilgiye atla
Ara
Oturum açın
Tam ekran izle
Beğen
Yer işareti ekle
Paylaş
Çalma Listesine ekle
Bildir
41 - Add App Loading Page
Mustafa Demirhan
Takip Et
02.09.2024
Kategori
📚
Öğrenme
Döküm
Tüm video dökümünü görüntüle
00:00
Alright guys, so let us jump back over to our .NET MAUI app and what we're going to
00:05
do is add two new pages. One called a loading page and one called a login page.
00:12
Alright, so let us go ahead and add new item. We'll jump down to the .NET MAUI
00:23
section and what we want is a new content page based on XAML. Alright, so
00:30
I'm going to call this one loading page and go ahead and add that and then we're
00:39
going to repeat those steps and the next one is going to be login page. So new
00:45
page is login page. Now the purpose of the loading page is to be an
00:52
intermediary when the person opens the app who want to put them on that page
00:56
and then try and figure out are they logged in, do they have enough
01:01
information for us to see them as an authenticated user to proceed into the
01:06
app or do they need to go and log in. So think about any mobile app and that
01:11
little delay when the app is coming up and then it knows okay show you the
01:15
login screen if it feels that you need to log in again or just proceed to show
01:20
you what is in the app. So with all of that said, what I'm going to do in the
01:25
app shell is change the content template from main page to loading page and I'm
01:31
also going to change that fly out behavior to enabled because some of,
01:38
sorry, to fly out because some of the things that we're going to do will
01:42
require that to be set as such right. Another thing that I'm going to do is in
01:48
the route registration because we're going to be routing to different pages
01:55
I'm actually going to add login page as one of the potential routes and of
02:06
course we use the name of meaning go to login page and we use type of and we're
02:12
also going to be using the main page because we're going to know to route or
02:18
route to main page after a login or if the person has valid credentials already
02:25
right. So we're just adding those routes because we know we're going to need them
02:29
throughout our activities here in the app. So login page or loading page rather
02:37
let me start off with the loading page. So I'm going to create a new view model
02:42
for the loading page and this view model of course will model what we've
02:52
been doing so far so we'll inherit from the base view model and it will be a
02:56
partial because we're retaining that whole MVVM pattern. So this loading
03:03
page view model its sole purpose will be to determine should I allow you to
03:10
proceed or should I send you to the login page. So let us give it a
03:16
constructor and this constructor is simply going to call a method that I'm
03:21
going to call check user login details or yeah we can just call it that maybe a
03:26
mouthful but I think it's clear enough and I'll just generate that method below
03:31
now check user login details what we want to do is retrieve token from
03:42
internal storage so and and as I as we build this out I'm going to be filling
03:47
in those blanks so once we would have logged in and got the token we need to
03:51
store that token somewhere so that we can use this token every other time you
03:56
try to do something with the API so every phone has internal storage and
04:02
we'll be looking at using this one this type called secure storage which is
04:06
where we'll put the token and of course we'll need to retrieve it for the during
04:11
the runtime of the app or clear it out when it's expired and do other things
04:16
right so when we get the token and I'm just going to say var token here is
04:22
equal to and I'll just go ahead and write the code as it will look so we'll
04:28
await a call to secured storage where we'll be getting the item with the key
04:36
token so that's what I mean by return retrieve sorry from internal storage so
04:41
we'll go to secured storage get the a sink don't get a sink and get whatever
04:47
value is associated with that key then we can check if this token is present so
04:56
I can say if token I don't want to say if it is not it's more like if it is
05:01
null or white space so I just want to make sure that string dot is null or
05:06
empty is false so if it is null or empty so if it is null or empty then I
05:16
will send you to the login page right so here I can just say I wait shell dot
05:24
current dot go to a sink go to a sink I'm sorry let me get my spelling right
05:35
there we go and we'll be sending you and I'll interpolate this string I will be
05:43
sending you to name of because we want to keep everything as strongly typed as
05:49
possible login page right so that's why we registered that route earlier so we
05:54
want to send you to that route if the token is empty so if I try to when the
06:00
app is loading if I attempt to get the token and there is no token then that
06:06
means you need to log in all right but then there might be a token but it might
06:11
be expired so below that I can now say
06:18
evaluate token and decide if valid so what I can do and I'm trying to kind of
06:31
keep it light because I don't want to do too much without a context so let us
06:36
just leave it here for now all right so we're going to load check if the person
06:42
is logged in by checking for the token if there is no token then we go to the
06:46
login page and then later on when we flesh out what that whole token thing
06:50
means then we can figure out what other routes we need to take one tiny refactor
06:57
before I move forward is I'm going to introduce two methods here one that says
07:01
go to login page one that says go to main page that way we might have
07:06
multiple points where we do this navigation so I can just call the method
07:10
instead of trying to type out that code every single time right so that will be
07:19
a nice way to get that done now of course after doing all of that we need
07:24
to set up the binding between our loading page and our view model so well
07:30
we need to register the view model as well so let us just do all of that while
07:35
we're here so registering the view model it's going to be one loading page really
07:40
so I'm just going to add that loading page as a singleton and while I'm here
07:47
I might as well just add login page as well and then for the view model we're
07:54
going to have the loading page view model as a singleton and while I'm here
08:00
even though it doesn't yet exist I'm just going to put in that login page
08:04
view model so as soon as we create it and this error should disappear right
08:10
and in our loading page page code behind there we go I'm going to add the loading
08:20
page view model all right there we go so now I go ahead and include that now our
08:28
loading page is set up so when we come back we're going to set up what the
08:32
login page should look like so we're going to adjust the design of course and
08:36
we're going to set up its view model and the code behind accordingly
Önerilen
15:35
|
Sıradaki
42 - Add App Login Page
Mustafa Demirhan
02.09.2024
10:11
40 - Set Up Login Endpoint
Mustafa Demirhan
24.08.2024
0:56
38 - Section Overview
Mustafa Demirhan
24.08.2024
8:53
39 - Add Identity to API
Mustafa Demirhan
24.08.2024
20:55
21 - Implement a Details Page
Mustafa Demirhan
24.07.2024
1:21
37 - Section Summary
Mustafa Demirhan
24.08.2024
23:05
47 - Adjust App Flow and Layout
Mustafa Demirhan
02.09.2024
7:16
20 - Style Our List Page View
Mustafa Demirhan
18.07.2024
2:16
49 - Section Summary
Mustafa Demirhan
02.09.2024
6:36
43 - Seed Users and Roles
Mustafa Demirhan
02.09.2024
6:41
26 - Section Overview
Mustafa Demirhan
24.07.2024
6:51
09 - Navigating Multiple Pages
Mustafa Demirhan
15.07.2024
6:51
25 - Section Summary
Mustafa Demirhan
24.07.2024
5:16
48 - Handle Logout
Mustafa Demirhan
02.09.2024
14:00
36 - Essential Fixes
Mustafa Demirhan
24.08.2024
0:56
11 - Section Overview
Mustafa Demirhan
18.07.2024
5:03
08 - Shared Resources
Mustafa Demirhan
15.07.2024
7:50
34 - Configure Mobile App for Network Connections
Mustafa Demirhan
24.08.2024
27:45
46 - Set Up Login Logic and Flow
Mustafa Demirhan
02.09.2024
3:46
14 - Create Data Access Services
Mustafa Demirhan
18.07.2024
8:15
22 - Exploring Storage Options
Mustafa Demirhan
24.07.2024
1:32
01 - Introduction
Mustafa Demirhan
15.07.2024
17:56
44 - Authentication and Authorization to API
Mustafa Demirhan
02.09.2024
20:07
35 - Refactor MAUI App for API
Mustafa Demirhan
24.08.2024
14:28
19 - Implement Data Template and Collection View
Mustafa Demirhan
18.07.2024